如何在Redux应用程序中动态加载代码分割的减速器?

我要迁移到Redux。

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

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

但如果我构建了多个JavaScript包呢?例如，应用程序的每个页面都有自己的bundle。我认为在这种情况下，一个组合减速器是不好的。我查看了Redux的源代码，我找到了replaceReducer()函数。这似乎就是我想要的。

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

这是一个好方法吗?

72222 次浏览
小开
最佳答案

更新:请参见推特是怎么做到的。

这不是一个完整的答案，但应该可以帮助你开始。注意，我是__abc0 -我只是向组合列表中添加了新的元素。我认为没有理由扔掉旧的约简器——即使在最大的应用程序中，你也不可能有数千个动态模块，这就是你可能想要断开应用程序中的一些约简器的地方。

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


// ...
}

也许有更简洁的表达方式——我只是展示一下这个想法。

小开

这就是我如何在当前应用程序中实现它(基于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
}
}

在引导你的应用程序时创建一个注册表实例，传入将包含在入口包中的reducers:

// 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
}

下面是用这种设置创建的一个基本的实时示例，以及它的源代码:

  • < a href = " http://insin.github.io/react-examples/code-splitting-redux-reducers " > < / >示例
  • < a href = " https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers " > < / >来源

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

小开

这里是另一个带有代码分割和还原存储的例子，非常简单。在我看来很优雅。我认为对于那些正在寻找有效解决方案的人来说，这可能非常有用。

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

小开

现在有一个模块将注入还原器添加到redux存储中。它被称为回来的注射器。

下面是如何使用它:

  1. 不要合并减速器。相反，把它们放在一个(嵌套的)函数对象中，就像你通常会做的那样，但不要组合它们。

  2. 使用redux-injector中的createInjectStore，而不是redux中的createStore。

  3. 用injectReducer注入新的减速器。

这里有一个例子:

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月:

  • < p > Reedux

    实现Dan的建议，而不涉及你的商店，你的项目或你的习惯

也有其他的库，但是它们可能有太多的依赖，较少的示例，复杂的用法，与某些中间件不兼容，或者需要你重写你的状态管理。复制自Reedux的介绍页面:

小开

我们发布了一个新的库，可以帮助调节Redux应用程序，并允许动态添加/删除reducer和中间件。

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

模块提供以下好处:

  • 模块可以很容易地在应用程序之间或多个类似的应用程序之间重用。

  • 组件声明它们所需要的模块，redux-dynamic-modules确保为组件加载模块。

  • 模块可以动态地从存储中添加/删除，例如当一个组件挂载或当用户执行一个操作时

特性

  • 将减量器、中间件和状态组合成一个可重用的模块。
  • 随时从Redux存储中添加和删除模块。
  • 使用所包含的组件在呈现组件时自动添加模块
  • 扩展提供了与流行库的集成，包括redux-saga和redux-observable

示例场景

  • 您不希望预先加载所有减法器的代码。为一些reducer定义一个模块，并使用DynamicModuleLoader和react-loadable这样的库在运行时下载和添加模块。
  • 您有一些常见的减少器/中间件，需要在应用程序的不同区域重用它们。定义一个模块，并轻松地将其包含在这些区域中。
  • 您有一个包含多个共享类似状态的应用程序的单回购。创建一个包含一些模块的包，并在应用程序中重用它们
小开
以下是我所遵循的方法来实现这一点。 我们有我们的存储文件，我们将有静态减速器，它将始终存在于减速器中，而动态减速器将在安装所需组件时添加

减速机的文件

静态减速器将始终存在于应用程序中

const staticReducers = combineReducers({
entities1: entities1,
});


const createReducer = (asyncReducers) => {
return combineReducers({
staticReducers,
...asyncReducers,
});
};


export default createReducer;

存储文件

在这里我们可以有我们的自定义中间件，记录器等，我们可以传递在中间件数组。并像下面这样使用它。

import { createStore, applyMiddleware, compose } from "redux";
import createReducer from "./reducers";
import api from "./middlewares/api";


const middlewares = [ api, thunkMiddleware]
const middlewareEnhancer = applyMiddleware(...middlewares)
const enhancers = [middlewareEnhancer]
const composedEnhancers = composeWithDevTools(compose(...enhancers))
const store = createStore(createReducer(), composedEnhancers)


export default function configureStore() {
// Add a dictionary to keep track of the registered async reducers
store.asyncReducers = {};


// Create an inject reducer function
// This function adds the async reducer, and creates a new combined
// reducer
store.injectReducer = (key, asyncReducer) => {
store.asyncReducers[key] = asyncReducer;
store.replaceReducer(createReducer(store.asyncReducers));
};


// Return the modified store
return store;
}


export function getStore() {
return store;
}

现在假设我们有一个想要动态加载的组件，并且该组件可能有自己的slice(reducer)，那么我们可以调用inject reducer来动态地将其添加到现有的reducer中。

 const Counter2 = React.lazy(() =>
import("../counter2/counter2").then(async (module) => {
const entities2 = await
import("../../../store/entities2").then((todosModule) =>
todosModule.default);
store.injectReducer("entities2", entities2);
return module;
})
)




<React.Suspense fallback={<div>loading...</div>}>
<Counter2  />
</React.Suspense>

安装这个组件后，我们会发现entities2注入到我们的存储中。


提交答案