Javascript 如何在 Redux 应用程序中动态加载 reducer 以进行代码拆分

发布于10月10日

我要搬到Reduxgo .

我的应用程序由很多部分(页面、组件)组成，所以我想创建许多简化程序.Redux示例表明，我应该使用combineReducers()生成一个减速机.

此外，据我所知，Redux应用程序应该有一个存储区，它是在应用程序启动后创建的.当store 创建时，我应该通过我的组合减速器.如果应用程序不是太大，这是有意义的.

但是，如果我构建多个JavaScript包怎么办？例如，应用程序的每个页面都有自己的Bundle 包.我认为在这种情况下，一个组合式减速器不太好.我查看了Redux的源代码，发现有replaceReducer()个函数.这似乎就是我想要的.

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

这是一个好方法吗？

减速器.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));
}

路由.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);
      })
    }
  };

  // ...
}

可能有更好的方式来表达这一点-我只是展示一下 idea .