Question

根据另一个商店初始化商店并将它们都放在Provider中的最佳做法是什么？我有一个名为AuthManager的商店，它拥有一个名为user的可观察属性。我还有另一家名为GoalManager的商店。我需要user的{{1}}属性来初始化AuthManager。我想像这样构建GoalManager：

GoalManager

但是后来在react的上下文中添加一些内容是不可能的，因为有些孩子无法根据上下文的变化进行更新！我通过将const goalManager = new GoalManager(user);实例发送到AuthManager的构造函数来解决了这个问题，但我不喜欢它：

GoalManager

以后：

// services.js

const authManager = new AuthManager();
const goalManager = new GoalManager(authManager);

export default {
  authManager,
  goalManager
}

我不喜欢这个解决方案，因为我必须依赖// index.jsx import services from './services'; render(` <Provider {...services}> <App /> </Provider>`, mountPoint);到GoalManager，但它只取决于AuthManager。然后测试AuthManager.user会更难（因为你必须模拟一个大对象）。

有没有更好的解决方案？

Answer 1

也许是一种完全不同的思维方式，但这可以解决您的问题。

看起来，这对你也有用：

// AuthManager.js
class AuthManager {
  @observable user;
}

export default new AuthManager();

只需在GoalManager中导入AuthManager即可使用AuthManger.user

// GoalManager.js

// import the AuthManager and use the user directly.
import AuthManager from './AuthManager'

class GoalManager {
  @computed get someThing() {
     if (AuthManager.user) {
       // your stuff..
     }
  }
}

export default new GoalManager();

在服务中，您将获得实例。

// services.js

import authManager from './AuthManager'
import goalManager from './GoalManager'

export default {
  authManager,
  goalManager
}

你有这个主意吗？

如何在mobx-react提供商彼此依赖时添加商店？

1 个答案: