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

Question

我有一个带有 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 {

}

我知道将一家商店分成几家是一种很好的做法，但就我而言，两个屏幕上都使用了一些数据，我不想重复自己。

Answer 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>

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

Can I use one mobx store in two different components in react-native app?

store

reactjs

react-native

mobx

mobx-react