在具有多个商店的 React Native 应用程序中放置 MobXProvider (提供者) 的位置

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到后续视图的props中。有没有办法在单个控制器中提供和使用存储？这样：

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将它们注入到使用它们的组件中。