javascript - 在具有多个商店的 React Native 应用程序中将 MobXProvider (Provider) 放在哪里

Question

我无法理解 mobx-react/native 包中 Provider 和 @inject 的作用。

大多数使用 mobx Provider 的示例都使用它来提供全局存储。像这样:

import { Provider as MobXProvider, observer } from 'mobx-react/native';
import myStore from './stores/myStore.js'

@observer
export default class App extends Component{
    render() {
      return(
      <MobXProvider store={myStore)>
        <NavigationStackOrSomethingElse />
      </MobXBrovider>)
    }
}

Provider 到底是做什么用的？据我了解，我需要它来将商店@inject 存储到后续 View 的props 中。有没有办法在单个 Controller 中提供和使用商店？像这样:

import { Provider as MobXProvider, observer } from 'mobx-react/native';
import myStore from './stores/myStore.js'

@inject('store')  // <-- doesn't work
@observer
export default class SomeSmallView extends Component{
  render() {
    return(
    <MobXProvider store={myStore)>
      <MyViewThings />
    </MobXBrovider>)
  }
  myAction() {
    this.props.state.doSomeStateThings();
  }

}

如果使用多个商店，如何使用提供者？它们都在根屏幕中提供吗？它们是由要使用它的组件的父屏幕提供的吗？

Answer 1

所以事实证明你总是在开始时提供你想在你的应用程序中使用的所有商店:

<Provider chatStore={chatStore} wallStore={wallStore}>
  ...
</Provider>

然后简单地使用 @inject 将它们注入(inject)到使用它们的组件中。