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。

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

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

如何在不同的商店设置多个提供商？

1 个答案: