如何为不同的商店设置多个供应商? [英] How to set up multiple providers with different stores?

问题描述

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

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

全局存储在组件之间运行良好，但是当我尝试将它们分开时却无法正常工作.

所以，这个效果很好.

const MainTemplateWithRouter = (<div><路由器><Provider store={createStore(reducers)}><开关><路由精确路径="/" component={DashBoard}/><Route path="/auth" component={Auth}/><Route path="/admin-panel" 组件={AdminPanel}/><Route path="/project-manager" component={ProjectManager}/><Route path="/test" component={Test}/><Route path="*" component={NotFound}/></开关></提供者></路由器>

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

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

const MainTemplateWithRouter = (<div><路由器><h1>带有标志的标题:XXXX</h1><div><链接到="/">主页</链接><br/><br/>

<Provider store={createStore(reducers)}><开关><路由精确路径="/" component={DashBoard}/><Route path="/auth" component={Auth}/><Provider store={createStore(adminPanelReducers)}><Route path="/admin-panel" 组件={AdminPanel}/></提供者><Route path="/project-manager" component={ProjectManager}/><Provider store={createStore(testReducer)}><Route path="/test" component={Test}/></提供者><Route path="*" component={NotFound}/></开关></提供者></路由器>

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

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

@编辑

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

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

解决方案

This React Redux 部分只处理多个同级存储.

React Redux 6 已更改为使用 React 上下文 API 而不是旧的 Context.Redux Provider 使用 React 上下文 Provider 为连接的组件提供状态.上下文 API Provider 很自然地会覆盖父 Provider 提供的值，因此连接的组件只会考虑最内层的 Provider.

如果有多个嵌套 store，他们可以有自己的上下文，必须在 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" 组件={AdminPanel}/></提供者>...</提供者>...@connect(globalMapState, null, null, { context: GlobalContext })@connect(adminMapState, null, null, { context: AdminContext })类 AdminPanel ...

或者兄弟可以使用默认的Redux上下文 避免样板代码:

const GlobalContext = React.createContext();...<Provider context={GlobalContext} store={globalStore}>...<供应商商店={adminStore}><Route path="/admin-panel" 组件={AdminPanel}/></提供者>...</提供者>...@connect(globalMapState, null, null, { context: GlobalContext })@connect(adminMapState)类 AdminPanel ...

I'm currently working on project and I'm facing a problem. I'd love to end with different react sub-apps with different providers and store.

I've been already trying to apply two separate stores, without success so far. The main problem is when i have one global store everything is working just fine, when i try to apply different stores to different routes app is just simply using only first of them. Problem is that the app will be working on vulnerable data i have to split it among multiple stores.

Global store works just fine among component, but when i try to separate them it's not working properly.

So, this one is working good.

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'));

Perfect solution would be something like that with one global store (to storing e.g. currently selected language (multi lang app)) and one store for each sub-app. As mentioned above. App will be huge with a lot of sub-apps that should be stored in different stores.

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'));

What am I doing wrong? Is it possible to achieve one global stores and separate stores for each subapp? If not, can i store currently selected lang in global context and create store for each sub-app?

@Edit

https://redux.js.org/recipes/isolating-redux-sub-apps was the thing i needed.

Separated the stores among sub-apps according to the docs. However i can't use global store and local stores at the same time.

解决方案

This React Redux section addresses only multiple sibling stores.

React Redux 6 was changed to use React context API instead of legacy Context. Redux Provider uses React context Provider to provide a state to connected components. It's natural for context API Provider to override the value provided by parent Provider, so only innermost Provider will be taken into account by connected component.

If there are multiple nested stores, they can have their own contexts that has to be specified in both Redux Provider and 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 ...

Or sibling can use default Redux context to avoid boilerplate code:

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

这篇关于如何为不同的商店设置多个供应商?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！