React Native 和 Redux 我应该每个场景/路线都有一个商店吗？

Posted 2023-02-22

【中文标题】React Native 和 Redux 我应该每个场景/路线都有一个商店吗？

【英文标题】：React Native & Redux should I have a Store per Scene/Route?

【发布时间】：2016-09-11 12:07:25

【问题描述】：

我正在使用react-native-router-flux 来管理我的应用程序中的导航。我想知道我应该为每个场景创建一个商店还是应该只创建一个（以及如何？）

现在看起来是这样的：

App.js

 <Router>
    <Scene key="root">
      <Scene key="mainScene" component=MainScene title="MainScene" initial=true />
      <Scene key="secondScene" component=SecondScene title="SecondScene" />
    </Scene>
 </Router>

MainScene.js

 <Provider store=store>
     <MainConnectedComponent/>
 </Provider>

SecondScene.js

 <Provider store=store>
     <SecondConnectedComponent/>
 </Provider>

我在某处读到 redux 只喜欢一个商店，但我不知道如何通过这种将应用程序分成不同部分的导航来实现这一点。

【参考方案1】：

您只使用一个商店，但您将减速器分开。

import  createStore, combineReducers  from 'redux';

const mainSceneReducer = (state, action) => 
    ...
;

const secondSceneReducer = (state, action) => 
    ...
;

const store = createStore(
    combineReducers(
        mainSceneReducer,
        secondSceneReducer
    );
);

更新：现在关于路由器，您可以将 Provider 放在主路由器周围，并将其从 mainScene.js 和 secondScene.js 中删除：

<Provider store=store>
 <Router>
    <Scene key="root">
      <Scene key="mainScene" component=MainScene title="MainScene" initial=true />
      <Scene key="secondScene" component=SecondScene title="SecondScene" />
    </Scene>
 </Router>
</Provider>

相关SO问题：redux-multiple-stores-why-not

【讨论】：

你能告诉我这如何与导航一起工作吗？我应该把提供者放在那里吗？