Mobx 的 @inject 是如何映射存储的？

Question

在 Mobx (mobx-react) 中，我们可以 'inject' 像这样在 React 组件中存储：

@inject('store')
@observer class Abc extends React.Component {

}

这导致 Abc 得到 store 作为 prop 就像 this.props.store。但是 inject 如何将 store 映射到实际商店？

Answer 1

Mobx 有一个 Provider，您可以使用它来将商店传递给组件。 Provider 用于将依赖项放在 react 的上下文中。

const yourStore = new YourStore();
const app = (
  <Provider yourStore={yourStore}>
    <Abc />
  </Provider>  
);
ReactDom.render(app, container);

现在您的组件 Abc 将可以作为 this.props.yourStore

访问商店

Answer 2

您首先通过将它们作为道具传递给提供者来注册它：

<Provider store1={} store2={}>
    <Abc />
</Provider>

因此 Provider 组件将传递给 Provider 组件的 props 添加到 React 的上下文中。 React 的上下文现在自动将这些道具传递给每个组件。

注入唯一要做的就是从上下文中读取商店对象，获取传入的字符串，通过字符串参数过滤商店对象并将其传递给组件。

如您所见，mobxStores 是保存商店对象的变量。

您也可以完全不使用 @inject 并像这样在您的组件中访问您的商店：

this.context.mobxStores.YOUR_STORE_NAME

代码如下：

How does @inject of Mobx map stores?