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

Posted 2021-05-05

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

const goalManager = new GoalManager(user);

但是后来在react的上下文中添加一些东西是不可能的，因为有些孩子无法根据上下文的变化进行更新！我通过将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更难（因为你必须模拟一个大对象）。

那有更好的解决方案吗？

答案

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

看起来，这对你也有用：

// 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
}

你明白了吗？