reactjs - 如何为不同的商店设置多个供应商？

Question

我目前正在做项目，但遇到了一个问题。我很乐意以不同的供应商和商店的不同 react 子应用程序结束。

我一直在尝试申请两个独立的商店，但到目前为止没有成功。主要问题是当我有一个全局商店时一切正常，当我尝试将不同的商店应用于不同的路线时，应用程序只是仅使用其中的第一个。问题是该应用程序将处理易受攻击的数据，我必须将其拆分到多个商店。

全局存储在组件之间工作得很好，但是当我尝试将它们分开时，它无法正常工作。

所以，这个运行良好。

const MainTemplateWithRouter = (
<div>
   <Router>
       <Provider store={createStore(reducers)}>
              <Switch>
                    <Route exact path="/" component={DashBoard} />
                    <Route path="/auth" component={Auth} />
                    <Route path="/admin-panel" component={AdminPanel} />
                    <Route path="/project-manager" component={ProjectManager} />
                    <Route path="/test" component={Test} />
                    <Route path="*"  component={NotFound} />
              </Switch>
       </Provider>
   </Router>
</div>
);

ReactDOM.render(MainTemplateWithRouter, document.querySelector('#root'));

完美的解决方案将类似于一个全局商店(存储例如当前选择的语言(多语言应用程序))和每个子应用程序的一个商店。正如刚才提到的。应用程序会很大，有很多子应用程序应该存储在不同的商店中。

const MainTemplateWithRouter = (
<div>
   <Router>
           <h1>Header with Logo: XXXX</h1>
                <div>
                    <Link to="/">Home</Link>
                        <br/><br/>
                </div>

       <Provider store={createStore(reducers)}>
              <Switch>
                    <Route exact path="/" component={DashBoard} />
                    <Route path="/auth" component={Auth} />
                    <Provider store={createStore(adminPanelReducers)}>
                    <Route path="/admin-panel" component={AdminPanel} />
                    </Provider>
                    <Route path="/project-manager" component={ProjectManager} />
                    <Provider store={createStore(testReducer)}>
                    <Route path="/test" component={Test} />
                    </Provider>
                    <Route path="*"  component={NotFound} />
              </Switch>
       </Provider>
   </Router>
</div>
);

ReactDOM.render(MainTemplateWithRouter, document.querySelector('#root'));

我究竟做错了什么？是否可以为每个子应用实现一个全局商店和单独的商店？如果没有，我可以在全局上下文中存储当前选择的 lang 并为每个子应用程序创建存储吗？

@编辑

https://redux.js.org/recipes/isolating-redux-sub-apps是我需要的东西。

根据文档在子应用程序之间分离商店。但是我不能同时使用全局商店和本地商店。

Answer 1

This React Redux 部分仅解决多个同级存储。

React Redux 6 已更改为使用 React 上下文 API 而不是旧的 Context。 Redux Provider使用 React 上下文 Provider为连接的组件提供状态。上下文 API 很自然 Provider覆盖父级提供的值 Provider ，所以只有最里面 Provider将被连接的组件考虑在内。

如果有多个嵌套存储，they can have their own contexts必须在 Redux Provider 中指定和 connect :

const GlobalContext = React.createContext();
const AdminContext = React.createContext();

...

   <Provider context={GlobalContext} store={globalStore}>
     ...
     <Provider context={AdminContext} store={adminStore}>
        <Route path="/admin-panel" component={AdminPanel} />
     </Provider>
      ...
   </Provider>

...

@connect(globalMapState, null, null, { context: GlobalContext })
@connect(adminMapState, null, null, { context: AdminContext })
class AdminPanel ...

或者兄弟可以使用 default Redux context避免样板代码:

const GlobalContext = React.createContext();

...

   <Provider context={GlobalContext} store={globalStore}>
     ...
     <Provider store={adminStore}>
        <Route path="/admin-panel" component={AdminPanel} />
     </Provider>
      ...
   </Provider>

...

@connect(globalMapState, null, null, { context: GlobalContext })
@connect(adminMapState)
class AdminPanel ...