- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 2 个商店:UserStore 和 TodoStore。为了获取待办事项,我需要知道登录用户的 ID。
那是我的 UserStore 的一部分
export default class UserStore {
@observable currentUser = null;
@observable loading = false;
constructor() {
this.subscribe();
}
@action subscribe = () => {
this.loading = true;
firebase.auth().onAuthStateChanged((user) => {
if(user) {
this.setCurrentUser(user);
} else {
this.unsetCurrentUser();
}
this.loading = false;
})
}
}
这是我的 TodoStore 的构造函数
constructor(users) {
this.users = users;
console.log(this.users.currentUser) //null
this.storageRef = firebase.storage().ref('files/todos');
this.todosRef = firebase.database().ref(`todos/${this.users.currentUser.uid}`);
this.filesRef = firebase.database().ref(`files/${this.users.currentUser.uid}/todos`);
this.logger();
}
这里的问题是我收到一个错误,因为在调用它时 currentUser 仍然是 null。
这就是我合并商店的方式:
const routing = new RouterStore();
const ui = new UiStore();
const users = new UserStore(ui);
const todos = new TodoStore(users);
const stores = {
routing,
ui,
users,
todos,
}
我做错了什么?我如何知道 currentUser 可观察对象何时可用?
最佳答案
我认为最简单的解决方案是在用户存储中保存对 firebase 身份验证 promise 的引用,并在 TodoStore
中使用 currentUser
一旦它已解决:
// UserStore.js
export default class UserStore {
@observable currentUser = null;
@observable loading = false;
authPromise = null;
constructor() {
this.subscribe();
}
@action subscribe = () => {
this.loading = true;
this.authPromise = firebase.auth().onAuthStateChanged((user) => {
if(user) {
this.currentUser = user;
} else {
this.currentUser = null;
}
this.loading = false;
})
}
}
// TodoStore.js
export default class TodoStore {
constructor(userStore) {
this.userStore = userStore;
userStore.authPromise.then(() => {
const uid = userStore.currentUser.uid;
this.storageRef = firebase.storage().ref('files/todos');
this.todosRef = firebase.database().ref(`todos/${uid}`);
this.filesRef = firebase.database().ref(`files/${uid}/todos`);
this.logger();
});
}
}
关于javascript - 等待来自另一个 mobx 存储的异步数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42729102/
我正在使用带有 mobx 的 react js 并从 api 获取数据。 我得到的数据是对象数组。 当我将数据设置为 mobx 变量时,我会看到代理对象数组(不确定代理说什么)。我只是想将从 api
我正在使用 mobx/react 构建两个小部件,其中所有逻辑都位于商店内。两者共享大部分设计规则,因此它们的商店有 95% 相同。 有没有聪明的方法来处理这种情况? 例如,是否可以创建这样的继承?
我正在学习 lynda.com 类(class),这是我拥有的代码 import firebase from 'firebase' import MobxFirebaseStore from 'mob
我的异步操作看起来像这样: anAsyncAction: process(function* anAsyncAction() { self.isLoading = true; cons
为什么我应该使用 MobX 状态树而不是普通 MobX?似乎每次我读到 MobX 时,都会在同一个地方提到 MST。有人实际上只是单独使用 MobX 吗? 这个问题可能太笼统了...... 最佳答案
我为我的 typescript 服务器 API 定义了接口(interface),当通过 MobX 状态树定义模型时,我想确保 typescript 编译器强制模型快照符合这些接口(interface
我有多个 mobx 商店,发现自己在每个商店中都有几乎相同的操作。因此,我希望能够在商店之间推广和重用它们。下面我尝试分解创建操作,希望能够将其导入多个商店,但它不起作用,因为 self 不可用。 我
我已经查看了 mobx-state-tree 文档甚至测试文件 https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-
我有一个 Mobx 状态树模型已经长得太长了,我想将它拆分到多个 javascript 文件中。 下面是部分代码的演示: ///file1.js import { types } from "mob
我正在尝试了解 mobx 中 Action 装饰器的有用性,即使在阅读了文档 https://mobx.js.org/refguide/action.html 后也是如此。 仍然想知道为什么我应该使用
假设结构如下 stores/ RouterStore.js UserStore.js index.js 每个 ...Store.js 文件都是一个包含 @observable 和 @act
在我看来,人们正在交替使用 model 和 props。我试图找到有关 Prop 的文件但失败了。谁能告诉我区别? 最佳答案 model 方法创建一个新模型。它需要两个参数: 姓名 属性(可选) 您可
class FilterCriteria { @observable filter = new Map(); } let criteria = new FilterCriteria (); /
我开始学习 mobx,我不明白为什么 mobx 发明了“ Action ”实体。将所有更改批处理到 setImmediate 中的下一个刻度会更容易吗?这将自动使所有同步状态更改以与@action 现
如何从 MobX 访问组件引用,下面的示例,在 componentDidMount 之后运行 'doSomething' 乐趣,我得到了一个非函数错误, 我想弄清楚如何在 MobX 中访问 ref。
我有一篇文章是一个 mobx-state-tree 对象,我正在 React 应用程序中使用它。 这是我树中的一个 Action setId(id: string) { self.id = id
我有一篇文章是一个 mobx-state-tree 对象,我正在 React 应用程序中使用它。 这是我树中的一个 Action setId(id: string) { self.id = id
我开始将我的商店连接到 mobx。我想知道使用 observer(['store'],...) 或使用 inject('store')(observer(...)) 我认为注入(inject)不是 r
我有 Angular 应用程序 v6,我正在使用最新版本的 mobx 和 mobx-angular(您可以在依赖项中看到)。我来自 ngrx、ngxs 背景,所以很难理解 mobx 流程,因为它或多或
我是 mobx 的新手,我想对 Mobx 进行快速测试,看看我如何才能将它应用到我的项目中。 当我运行这段代码时 class Entity{ @observable version = 1; }
我是一名优秀的程序员,十分优秀!