如何动态加载减速器
How to dynamically load reducers
我在一个站点内有三个迷你网站。我希望主减速器存储身份验证信息。并且,各自的迷你网站存储它自己的减速器。因此,当浏览一个迷你站点时,必须加载相应的 template/component 和 reducer。请注意,我这样做是因为迷你站点中的商店非常详尽
类似于此 github repo。这个 repo 包含旧的 react-router 版本。我希望它与 react-router-v4 和 create-react-app
一起使用
动态加载组件时如何动态加载与特定组件相关的reducer?
我正在使用 create-react-app
创建 React 项目,这些是包版本
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
这就是我动态加载组件的方式
class DynamicImport extends React.Component {
state = { component: null };
componentDidMount() {
this.props
.load()
.then(module => this.setState(() => ({ component: module.default })));
}
render() {
return this.props.children(this.state.component);
}
}
const Admin = props => (
<DynamicImport
load={() => import("../views/Admin")}
>
{Component =>
Component === null ? <div>Loading</div> : <Component {...props} />
}
</DynamicImport>
);
并在 render() 中
<Route path="/admin" component={Admin} />
有没有更简单的方法来 load/inject 渲染组件时的各个 reducer
正如@lustoykov 所建议的,动态加载减速器的方法是 store.replaceReducer(configureReducers(reducer))
这篇通俗易懂的文章详细解释了如何设置动态减速器。 https://tylergaw.com/articles/dynamic-redux-reducers/
这是我的 github 存储库,其中包含完整的解决方案。它遵循文章中给出的步骤。 https://github.com/sabbiu/dynamic-reducers-for-react/
我在一个站点内有三个迷你网站。我希望主减速器存储身份验证信息。并且,各自的迷你网站存储它自己的减速器。因此,当浏览一个迷你站点时,必须加载相应的 template/component 和 reducer。请注意,我这样做是因为迷你站点中的商店非常详尽
类似于此 github repo。这个 repo 包含旧的 react-router 版本。我希望它与 react-router-v4 和 create-react-app
动态加载组件时如何动态加载与特定组件相关的reducer?
我正在使用 create-react-app
创建 React 项目,这些是包版本
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
这就是我动态加载组件的方式
class DynamicImport extends React.Component {
state = { component: null };
componentDidMount() {
this.props
.load()
.then(module => this.setState(() => ({ component: module.default })));
}
render() {
return this.props.children(this.state.component);
}
}
const Admin = props => (
<DynamicImport
load={() => import("../views/Admin")}
>
{Component =>
Component === null ? <div>Loading</div> : <Component {...props} />
}
</DynamicImport>
);
并在 render() 中
<Route path="/admin" component={Admin} />
有没有更简单的方法来 load/inject 渲染组件时的各个 reducer
正如@lustoykov 所建议的,动态加载减速器的方法是 store.replaceReducer(configureReducers(reducer))
这篇通俗易懂的文章详细解释了如何设置动态减速器。 https://tylergaw.com/articles/dynamic-redux-reducers/
这是我的 github 存储库,其中包含完整的解决方案。它遵循文章中给出的步骤。 https://github.com/sabbiu/dynamic-reducers-for-react/