MOBX- React 仅从 rootStore 注入单个商店

Question

我想对我的 React 组件实施响应式设计模式。因此，我使用 mobX，但我的核心设置并没有按预期工作。我的设置是拥有一个根存储并在其中实例化所有子存储。 最后我只想在我的反应组件中注入需要的子商店。

UiStore

export default class UIStore {
      @observable language = {};

      constructor() {
        autorun(() => {console.log(this.language)})
      }


      @action
      async getLanguage() {
            const response = await new Promise((resolve) =>
              setTimeout(() => resolve({ language: 'en_GB' }), 1500)
            );

            runInAction(() => this.language = response);

      }
}

根存储区

// Inject all stores in this root store
class RootStore {
  constructor() {
    this.uiStore = new UIStore(this);
  }
}

const rootStore = new RootStore();
export default rootStore;

index.js

const Root = () => (
  <MobXProvider rootStore={rootStore}>
    <App webSocketClient={GlobalWSC}/>
  </MobXProvider>
);

ReactDOM.render(<Root/>, document.getElementById('app'));

App.jsx

    @inject(stores => ({
      uiStore: stores.uiStore // <== this does not work only: stores.rootStore.uiStore
    })
    )
    @observer
    class App extends React.Component {
      ...
      componentDidMount() {
        console.log(this.props);
        this.props.uiStore.getLanguage(); //throws error cannot find function getLanguage()
  }
}

}

从App.jsx中的评论可以看出，注入子商店仅适用于stores.rootStore.uiStore，但为什么呢？

Answer 1

那是因为你在 MobXProvider

中这样定义了它

为了获得所需的行为，请像这样定义它

const Root = () => (
  <MobXProvider uiStore={uiStore}>
    <App webSocketClient={GlobalWSC}/>
  </MobXProvider>
);

当然这不是一个好的方法，因为你的根商店中会有更多商店，所以你将不得不以某种方式破坏你的根商店内部商店作为 MobXProvider 道具。虽然我不确定为什么会导致您出现问题（我一直在多个项目中使用您的语法）。

您可以执行此操作的一种方法

class RootStore {
  constructor() {
    this.stores = {
        uiStore: new UIStore(this)
    }
  }
}

const Root = () => (
  <MobXProvider {...rootStore.stores}>
    <App webSocketClient={GlobalWSC}/>
  </MobXProvider>
);

MOBX- React 仅从 rootStore 注入单个商店

MOBX- React only inject single store from rootStore

reactjs

mobx

mobx-react

UiStore

根存储区

index.js

App.jsx