代码分割
在大型 Web 应用程序中,通常需要将应用程序代码拆分为多个可以按需加载的 JS 包。 这种称为“代码分割”的策略通过减小初次加载时的 JS 的包的大小,来提高应用程序的性能。
要使用 Redux 进行代码拆分,我们希望能够将 reducer 动态添加到 store。 但是,Redux 实际上只有一个 root reducer 函数。 这个 root reducer 通常是在初始化应用程序时通过调用 combineReducers()
或类似函数生成的。 为了动态添加更多的 reducer,我们需要再次调用该函数来重新生成 root reducer。 下面,我们将讨论可以解决此问题的一些方法,并推荐提供此功能的两个库。
基本原则
replaceReducer
使用 Redux store 暴露出一个 replaceReducer
函数,该函数使用新的 root reducer 替代当前活动的 root reducer。调用该函数将替换内部 reducer 的引用,并 dispatch 一个 action 以初始化新加入的 reducer:
Reducer 注入
injectReducer
函数
定义一个 我们可能想从应用程序的任何地方调用 store.replaceReducer()
。因此,它使我们可以很轻易的定义一个可重用的 injectReducer()
函数。该函数能够保持对所有现有 slice reducer 的引用,并可将新 reducer 附加到 store 实例。
现在,只需要调用 store.injectReducer
函数即可向 store 添加新的 reducer。
使用 'Reducer Manager'
另一种方法是创建一个 'Reducer Manager' 对象,它跟踪所有已注册的 Reducer 并暴露出 reduce()
函数。 请参考以下示例:
要添加新的 reducer,现在可以调用 store.reducerManager.add("asyncState", asyncReducer)
。
要删除 reducer 现在可以调用 store.reducerManager.remove("asyncState")
。
库和框架
以下有一些优秀的库可以帮助您自动添加上述功能:
redux-dynostore
: 提供用于构建动态 Redux store 的工具,包括动态添加 reducer 和 sagas,以及与 React 绑定以帮助您添加与 React 组件的关联。redux-dynamic-modules
: 该库引入了“Redux Module”的概念,它是一组应该动态加载的 Redux 部件(Reducer,middleware)。 它还暴露出一个 React 高阶组件用来在应用组件加载后加载“Module”。 此外,它还与诸如redux-thunk
和redux-saga
之类的库集成,以使这些库可以动态加载他们的部件(thunk,sagas)。- Redux 生态系统链接: Reducer - Reducer 动态注入