如何在 mobx-react Provider 相互依赖时添加商店？

Question

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

const goalManager = new GoalManager(user);

但稍后无法在 React 的上下文中添加内容，因为某些 children 无法根据上下文的变化进行更新！我通过将 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。然后测试 GoalManager 更难（因为你必须模拟一个大 object）。

有没有更好的解决方案？

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 Provider 相互依赖时添加商店？

How to add stores to mobx-react Provider when they are dependent to each other?

dependency-injection

mobx

mobx-react