redux - 具有代码拆分和延迟加载的 reducer 的同构 Redux

Question

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

初始状态 (来自服务器)

{ "cases": {...}, "user": {...} }

客户端 redux 预期初始状态

这是基于可用的 reducer

{ "user": {...} }

加载 reducer

UserReducer

懒加载 reducer

CaseReducer

当我调用以下内容时发生错误

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

在传递给 createStore 的 initialState 参数中发现意外的关键“case”。期望找到已知的 reducer 键之一:“用户”。意外的键将被忽略。

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

Answer 1

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

These two ways to write a combined reducer are completely equivalent:

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

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