我可以在 react-native 应用程序的两个不同组件中使用一个 mobx 商店吗？答案

【问题标题】：Can I use one mobx store in two different components in react-native app?我可以在 react-native 应用程序的两个不同组件中使用一个 mobx 商店吗？
【发布时间】：2020-08-27 01:34:50
【问题描述】：

我有一个带有 topTabNavigator 的模块，它与商店的 mobx 提供程序一起包装：

export class ModuleTeam extends Component {
  render() {
    return (
      <Provider store={store}>
        <TopTabNavigator />
      </Provider>
    );
  }
}

在 topTabNavigator 内部我有两个屏幕：

export class TopTabNavigator extends Component {
  render() {
    return (
      <Tab.Navigator>
        <Tab.Screen name='Team' component={ScreenTeam}/>
        <Tab.Screen name='Invites' component={ScreenInvites}/>
      </Tab.Navigator>
    )
  }
}

你能告诉我在两个屏幕之间共享商店并像这样注入它的好方法吗，在每个组件中分开：

@inject('store')
@observer
export class ScreenTeam extends Component {

}

@inject('store')
@observer
export class ScreenInvites extends Component {

}

我知道将一个商店划分为几个商店是一种好习惯，但在我的情况下，两个屏幕上都使用了一些数据，我不想重复自己。

【问题讨论】：

我无法理解您的期望。可能你需要这样的东西：@inject('AuthStore', 'TeamsStore'), @inject('AuthStore', 'InvitesStore')
我可以为不同的组件创建不同的存储并注入吗？
在上面添加了答案

标签： reactjs react-native store mobx mobx-react

【解决方案1】：

您可以创建多个不同的商店。例子怎么做

const App = () =>
  <Provider FirstStore={FirstStore} SecondStore={SecondStore}>
     <app stuff... />
  </Provider>

const Button = (({ FirstStore, SecondStore, label, onClick }) =>
  <button style={{
      color: FirstStore.colors.foreground,
      backgroundColor: SecondStore.colors.background
    }}
    onClick={onClick}
  >{label}</button>
));

export default inject("FirstStore", "SecondStore")(observer(Button));

或一些高级示例

class stores {
  this.ModalsStore = new ModalsStore(this);
  this.AuthStore = new AuthStore(this);
  ...
}

const mobxStores = stores();

const App = () =>
  <Provider {...mobxStores}>
     <app stuff... />
  </Provider>

【讨论】：