具有代码拆分和延迟加载减速器的同构 Redux

Posted 2023-02-22

【中文标题】具有代码拆分和延迟加载减速器的同构 Redux

【英文标题】：Isomorphic Redux with code splitting and lazy loaded reducers

【发布时间】：2016-03-28 04:59:08

【问题描述】：

我正在使用 React Router 和 redux 构建一个具有代码拆分功能的同构应用程序。我已经尽我所能，但我需要一些帮助来解决我剩下的问题。我有一个大型应用程序，需要对前端进行代码拆分。我有一个减速器注册表，使我能够注册新的减速器（延迟加载），或替换我商店中现有的减速器。这很好用，但是因为我的应用程序的某些部分是延迟加载的，所以当我在客户端调用 combineReducers() 时，我的延迟加载减速器不存在，而它们在服务器上完美解析。这会导致意外的键错误，并强制我的商店在我的初始状态中忽略有问题的键。

initialState（来自服务器）

 "cases": ..., "user": ... 

客户端 redux 预期的初始状态

这是基于可用的减速器

 "user": ... 

加载减速器

UserReducer

延迟加载的减速器

CaseReducer

当我调用以下代码时发生错误

const finalCreateStore = compose(
  applyMiddleware(promiseMiddleware)
)(createStore);
const rootReducer = combineReducers(...reducers)
const store = finalCreateStore(rootReducer, initialState);

在传递给 createStore 的 initialState 参数中发现了意外的键“case”。预计会找到已知的 reducer 键之一：“user”。意外的键将被忽略。

在服务器上一切正常，但是在客户端上初始化应用程序而在加载之前暂时缺少减速器会导致此错误。有谁知道如何解决这个错误，或者告诉 redux 不验证初始状态的形状？我需要延迟加载的减速器可以使用“案例”。

【参考方案1】：

您似乎应该选择不使用内置的combineReducers，因为您知道该警告不适用于您的使用。来自 Redux 指南：

这两种写组合reducer的方式是完全等价的：

const reducer = combineReducers(
  a: doSomethingWithA,
  b: processB,
  c: c
)

function reducer(state, action) 
  return 
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  

所以你也可以选择第二个选项。