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

Question

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

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

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

Where to put MobXProvider (Provider) in React Native app with multiple stores

javascript

react-native

mobx