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

Question

我要迁移到 Redux。

我的应用程序由很多部分（页面、组件）组成，所以我想创建很多 reducer。 Redux 示例显示我应该使用 combineReducers() 来生成一个 reducer。

另外据我所知，Redux 应用程序应该有一个商店，它是在应用程序启动后创建的。创建商店时，我应该传递我的组合减速器。如果应用程序不是太大，这是有意义的。

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

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

这是一个好方法吗？

Answer 1

Update: see also how Twitter does it.

这不是完整的答案，但应该可以帮助您入门。请注意，我 并没有丢弃旧的减速器 — 我只是将新的减速器添加到组合列表中。我认为没有理由丢弃旧的 reducer——即使在最大的应用程序中你也不太可能有成千上万的动态模块，这正是你可能想要断开某些 reducer 的地方你的申请。

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

  // ...
}

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

Answer 2

这就是我在当前应用程序中实现它的方式（基于 Dan 在 GitHub 问题中的代码！）

// Based on https://github.com/rackt/redux/issues/37#issue-85098222
class ReducerRegistry {
  constructor(initialReducers = {}) {
    this._reducers = {...initialReducers}
    this._emitChange = null
  }
  register(newReducers) {
    this._reducers = {...this._reducers, ...newReducers}
    if (this._emitChange != null) {
      this._emitChange(this.getReducers())
    }
  }
  getReducers() {
    return {...this._reducers}
  }
  setChangeListener(listener) {
    if (this._emitChange != null) {
      throw new Error('Can only set the listener for a ReducerRegistry once.')
    }
    this._emitChange = listener
  }
}

在引导您的应用程序时创建注册表实例，传入将包含在入口包中的缩减器：

// coreReducers is a {name: function} Object
var coreReducers = require('./reducers/core')
var reducerRegistry = new ReducerRegistry(coreReducers)

然后在配置存储和路由时，使用可以将 reducer 注册表提供给的函数：

var routes = createRoutes(reducerRegistry)
var store = createStore(reducerRegistry)

这些函数看起来像：

function createRoutes(reducerRegistry) {
  return <Route path="/" component={App}>
    <Route path="core" component={Core}/>
    <Route path="async" getComponent={(location, cb) => {
      require.ensure([], require => {
        reducerRegistry.register({async: require('./reducers/async')})
        cb(null, require('./screens/Async'))
      })
    }}/>
  </Route>
}

function createStore(reducerRegistry) {
  var rootReducer = createReducer(reducerRegistry.getReducers())
  var store = createStore(rootReducer)

  reducerRegistry.setChangeListener((reducers) => {
    store.replaceReducer(createReducer(reducers))
  })

  return store
}

这是使用此设置创建的基本实例及其来源：

它还涵盖了为所有减速器启用热重载的必要配置。

Answer 3

这是另一个 example，带有代码拆分和 redux 存储，在我看来非常简单和优雅。我认为它可能对那些正在寻找可行解决方案的人非常有用。

这个store有点简化，它不会强制你在你的状态对象中有一个命名空间（reducer.name），当然可能会与名称发生冲突，但你可以控制这通过为你的减速器创建一个命名约定，它应该没问题。

Answer 4

现在有一个模块可以将注入 reducer 添加到 redux 存储中。它被称为Redux Injector。

使用方法如下：

不要组合减速器。而是像往常一样将它们放在函数的（嵌套）对象中，但不要组合它们。
使用 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);

完全披露：我是该模块的创建者。

Answer 5

截至 2017 年 10 月：

Reedux

只执行 Dan 建议的内容，不影响您的商店、项目或习惯

还有其他库，但它们可能依赖太多、示例较少、使用复杂、与某些中间件不兼容或需要您重写状态管理。从 Reedux 的介绍页面复制：

Answer 6

我们发布了一个新库，它有助于调整 Redux 应用程序并允许动态 adding/removing Reducers 和中间件。

请看一下 https://github.com/Microsoft/redux-dynamic-modules

模块提供以下好处：

模块可以在整个应用程序中或在多个类似应用程序之间轻松重复使用。
组件声明它们需要的模块，redux-dynamic-modules 确保为组件加载模块。
模块可以 added/removed 从商店动态获取，例如。当组件安装或用户执行操作时

特征

将 reducer、中间件和状态组合到一个可重复使用的模块中。
随时在 Redux 存储中添加和删除模块。
使用包含的组件在渲染组件时自动添加模块
扩展提供与流行库的集成，包括 redux-saga 和 redux-observable

示例场景

您不想预先加载所有减速器的代码。为一些减速器定义一个模块，并使用 DynamicModuleLoader 和像 react-loadable 这样的库在运行时下载和添加你的模块。
您有一些共同点 reducers/middleware 需要在应用程序的不同领域中重复使用。定义一个模块并轻松将其包含在这些区域中。
您有一个单一存储库，其中包含多个共享相似状态的应用程序。创建一个包含一些模块的包并在您的应用程序中重复使用它们

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

How to dynamically load reducers for code splitting in a Redux application?

javascript

flux

redux

code-splitting

Update: see also how Twitter does it.

reducers.js

store.js

routes.js