我目前工作的项目,我面临的一个问题。 我很想结束与不同的反应子应用与不同的供应商和存储。
我已经已经开始尝试采用两个独立的专卖店,都没有成功为止。 主要的问题是,当我有一个全局存储一切工作得很好,当我尝试不同的商店适用于应用程序只是简单地只用他们的第一个不同的路线。 问题是,应用程序将弱势数据的工作,我有到它的多个存储之间分配。
全球商场工作分量当中就好了,但是当我试图把它们分开它不能正常工作。
所以,这是一个很好的工作。
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是我需要的东西。
根据文档分离子应用程序中的商店。 但是我不能使用全球存储和当地的商店在同一时间。