我可以在两个不同的组件中使用一个mobx商店吗？

Question

我有一个topTabNavigator模块，用mobx provider包装了商店。

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>