如何为Redux应用程序中的代码拆分动态加载reducers？ [英] How to dynamically load reducers for code splitting in a Redux application?

问题描述

我要迁移到Redux。

I'm going migrate to Redux.

我的应用程序包含很多部分（页面，组件），因此我想创建许多reducer。 Redux示例显示我应该使用 combineReducers（）生成一个reducer。

My application consists of a lot of parts (pages, components) so I want to create many reducers. Redux examples show that I should use combineReducers() to generate one reducer.

另外据我了解Redux应用程序应该有一个商店，一旦应用程序启动就会创建它。在创建商店时，我应该通过我的组合减速机。如果应用程序不是太大，这是有道理的。

Also as I understand Redux application should have one store and it is created once the application starts. When the store is being created I should pass my combined reducer. This makes sense if the application is not too big.

但是，如果我构建多个JavaScript包怎么办？例如，每个应用程序页面都有自己的包。我认为在这种情况下，一个联合减速器并不好。我查看了Redux的来源，并找到了 replaceReducer（）函数。这似乎是我想要的。

But what if I build more than one JavaScript bundle? For example, each page of application has own bundle. I think in this case the one combined reducer is not good. I looked through the sources of Redux and I have found replaceReducer() function. It seems to be what I want.

我可以为我的应用程序的每个部分创建组合reducer并使用 replaceReducer（）当我在申请部分之间移动时。

I could create combined reducer for each part my application and use replaceReducer() when I move between parts of application.

这是一个好方法吗？

推荐答案

更新：另请参阅 Twitter如何做到这一点。

Update: see also how Twitter does it.

这不是一个完整的答案，但可以帮助你开始。请注意，我不丢弃旧的Reducer - 我只是在组合列表中添加新的。我认为没有理由抛弃旧的Reducer - 即使在最大的应用程序中你也不可能拥有数千个动态模块，这就是可能想要断开应用程序中某些Reducer的地步。

This is not a full answer but should help you get started. Note that I'm not throwing away old reducers—I'm just adding new ones to the combination list. I see no reason to throw away the old reducers—even in the largest app you're unlikely to have thousands of dynamic modules, which is the point where you might want to disconnect some reducers in your application.

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

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

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

  // ...
}

可能有更简洁的表达方式 - 我只是在表达这个想法。

There may be neater way of expressing this—I'm just showing the idea.

这篇关于如何为Redux应用程序中的代码拆分动态加载reducers？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！