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

Z时代
2024-01-10
分类：问答

我要迁移到Redux。

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

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

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

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

这是一个好方法吗？

回答：

这不是一个完整的答案，但应该可以帮助您入门。请注意，我并我只是在组合列表中添加了新的减速器。我认为没有理由扔掉旧的减速器-即使在最大的应用程序中，您也不可能拥有成千上万的动态模块，这是您可能希望断开应用程序中某些减速器的连接点。

回答：

import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    ...asyncReducers
  });
}

回答：

import { 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));
}

回答：

import { 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);
      })
    }
  };
  // ...
}