我要迁移到 Redux。
我的应用程序由很多部分（页面、组件）组成，所以我想创建许多 reducer。 Redux 示例表明我应该使用combineReducers() 来生成一个reducer。
据我所知，Redux 应用程序应该有一个商店，它是在应用程序启动后创建的。创建商店时，我应该通过我的组合减速器。如果应用程序不是太大，这是有道理的。
但是如果我构建了多个 JavaScript 包怎么办？例如，应用程序的每个页面都有自己的捆绑包。我认为在这种情况下，一个组合减速器不好。我查看了 Redux 的源代码，发现了 replaceReducer() 函数。这似乎是我想要的。
我可以为我的应用程序的每个部分创建组合减速器，并在我在应用程序的各个部分之间移动时使用replaceReducer()。
这是一个好方法吗？
【问题讨论】：
标签： javascript flux redux code-splitting
更新：另见how Twitter does it。
这不是一个完整的答案，但应该可以帮助您入门。请注意，我不会丢弃旧的减速器——我只是将新的减速器添加到组合列表中。我认为没有理由丢弃旧的 reducer——即使在最大的应用程序中，您也不太可能拥有数千个动态模块，这就是您可能想要断开应用程序中的一些 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);
})
}
};
// ...
}
可能有更简洁的表达方式——我只是展示这个想法。
【讨论】：
/homepage 动态加载时，然后当用户转到他们的 @ 时，更多的分支会被加载987654327@ 一个如何做到这一点的例子，会很棒。否则我很难弄平我的状态树，或者我必须有非常具体的分支名称user-permissions 和user-personal
这就是我在当前应用中实现它的方式（基于 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
}
这是使用此设置创建的基本实时示例及其来源：
它还涵盖了为所有减速器启用热重载的必要配置。
【讨论】：
现在有一个模块可以将注入 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);
完全披露：我是模块的创建者。
【讨论】：
截至 2017 年 10 月：
实施 Dan 的建议，仅此而已，无需触及您的商店、项目或习惯
还有其他的库，但是它们可能依赖太多，示例少，使用复杂，与某些中间件不兼容或需要您重写状态管理。复制自 Reedux 的介绍页面：
【讨论】：
我们发布了一个新库，可帮助调制 Redux 应用并允许动态添加/删除 Reducer 和中间件。
请看 https://github.com/Microsoft/redux-dynamic-modules
模块提供以下好处：
模块可以轻松地在整个应用程序中或多个相似应用程序之间重复使用。
组件声明它们需要的模块，redux-dynamic-modules 确保为组件加载模块。
特点
示例场景
【讨论】：