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

一尘不染

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

javascript

我要迁移到Redux。

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

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

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

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

这是一个好方法吗？

阅读 463

2020-05-01

共1个答案

一尘不染

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

reducers.js

import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';

export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    ...asyncReducers
  });
}

store.js

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

routes.js

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

  // ...
}

表达这一点可能有更整洁的方式-我只是在说明这个想法。

2020-05-01