如何设置不同的存储多个供应商?(How to set up multiple providers w

2019-10-16 12:59发布

我目前工作的项目,我面临的一个问题。 我很想结束与不同的反应子应用与不同的供应商和存储。

我已经已经开始尝试采用两个独立的专卖店,都没有成功为止。 主要的问题是,当我有一个全局存储一切工作得很好,当我尝试不同的商店适用于应用程序只是简单地只用他们的第一个不同的路线。 问题是,应用程序将弱势数据的工作,我有到它的多个存储之间分配。

全球商场工作分量当中就好了,但是当我试图把它们分开它不能正常工作。

所以,这是一个很好的工作。

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

完美的解决方案是类似的东西有一个全局存储(存储到如当前所选的语言(多郎APP))和一个存储每个子应用程序。 正如刚才提到的。 应用程序将是巨大的有很多应该被存放在不同的商店子应用程序。

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

我究竟做错了什么? 是否有可能实现每个subapp一个全局店和独立店? 如果没有,可我商店目前在全球范围内选择朗和每个子应用创建商店?

@编辑

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

根据文档分离子应用程序中的商店。 但是我不能使用全球存储和当地的商店在同一时间。

Answer 1:

这个阵营终极版节仅多个兄弟店。

反应终极版6改为使用情境的反应,而不是API的传统语境。 Redux的Provider使用阵营上下文Provider提供的状态下连接的组件。 这是很自然的情况下API Provider覆盖由母公司提供的价值Provider ,因此,只有最里面的Provider将被连接的组件加以考虑。

如果有多个嵌套的商店, 他们可以有自己的背景有两个终极版中指定Providerconnect

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

或兄弟姐妹可以使用默认的终极版背景下 ,以避免样板代码:

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


文章来源: How to set up multiple providers with different stores?