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

Question

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

初始状态（来自服务器）

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

客户端 redux 预期 initialState

这是基于可用的减速器

{ "user": {...} }

加载减速机

UserReducer

懒加载减速器

CaseReducer

调用下面的时候出现错误

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

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

在服务器上一切正常，但在客户端初始化应用程序时暂时缺少减速器直到加载它导致此错误。有谁知道如何解决这个错误，或者告诉 redux 不验证初始状态的形状？我需要 "cases" 才能用于我的惰性加载减速器。

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

所以你不妨选择第二个选项。

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

Isomorphic Redux with code splitting and lazy loaded reducers

redux