如何在Redux应用程序中动态加载reducers进行代码拆分？

Question

我要迁移到Redux。

我的应用程序包含很多部分（页面，组件），因此我想创建许多化简器。Redux的例子表明，我应该使用它combineReducers()来生成一个reducer。

另外，据我了解，Redux应用程序应具有一个存储，并且在应用程序启动后即会创建。创建商店时，我应该通过合并的减速器。如果应用程序不是太大，这是有道理的。

但是，如果我构建多个JavaScript捆绑包怎么办？例如，应用程序的每个页面都有自己的捆绑软件。我认为在这种情况下，一个减速器组合不好。我浏览了Redux的源代码，发现了replaceReducer()功能。这似乎是我想要的。

replaceReducer()当我在应用程序的各个部分之间移动时，我可以为应用程序的每个部分创建组合的reducer并使用。

这是一个好方法吗？

Answer 1

这不是一个完整的答案，但应该可以帮助您入门。请注意，我并没有丢弃旧的减速器-我只是在组合列表中添加了新的减速器。我认为没有理由丢弃旧的reducer —即使在最大的应用程序中，您也不大可能拥有成千上万个动态模块，这是您可能希望断开应用程序中某些reducers的连接的原因。reducers.jsimport { combineReducers } from 'redux';import users from './reducers/users';import posts from './reducers/posts';export default function createReducer(asyncReducers) {  return combineReducers({    users,    posts,    ...asyncReducers  });}store.jsimport { createStore } from 'redux';import createReducer from './reducers';export default function configureStore(initialState) {  const store = createStore(createReducer(), initialState);  store.asyncReducers = {};  return store;}export function injectAsyncReducer(store, name, asyncReducer) {  store.asyncReducers[name] = asyncReducer;  store.replaceReducer(createReducer(store.asyncReducers));}routes.jsimport { injectAsyncReducer } from './store';// Assuming React Router here but the principle is the same// regardless of the library: make sure store is available// when you want to require.ensure() your reducer so you can call// injectAsyncReducer(store, name, reducer).function createRoutes(store) {  // ...  const CommentsRoute = {    // ...    getComponents(location, callback) {      require.ensure([        './pages/Comments',        './reducers/comments'      ], function (require) {        const Comments = require('./pages/Comments').default;        const commentsReducer = require('./reducers/comments').default;        injectAsyncReducer(store, 'comments', commentsReducer);        callback(null, Comments);      })    }  };  // ...}表达这一点可能会有更整洁的方式-我只是在说明这个想法。

Answer 2

现在有一个模块，可将注入的reducer添加到redux存储中。它称为Redux注入器。使用方法如下：不要组合减速器。而是像平常一样将它们放在函数的（嵌套）对象中，但不合并它们。使用redux-injector中的createInjectStore而不是redux中的createStore。使用injectReducer注入新的reducer。这是一个例子：import { createInjectStore, injectReducer } from 'redux-injector';const reducersObject = {   router: routerReducerFunction,   data: {     user: userReducerFunction,     auth: {       loggedIn: loggedInReducerFunction,       loggedOut: loggedOutReducerFunction     },     info: infoReducerFunction   } };const initialState = {};let store = createInjectStore(  reducersObject,  initialState);// Now you can inject reducers anywhere in the tree.injectReducer('data.form', formReducerFunction);完全披露：我是模块的创建者。