具有代码拆分和延迟加载的Reducer的同构Redux

Question

我正在构建一个使用react router和redux进行代码拆分的同构应用程序.我尽可能地走了,但我需要一些帮助才能找出问题的其余部分.我有一个大型应用程序,需要前端的代码分割.我有一个reducer注册表,使我能够注册新的reducer(延迟加载),或替换我的商店中现有的reducer.这很好用,但是由于我的应用程序部分是延迟加载的,当我在客户端调用combineReducers()时,我的延迟加载的reducers不存在,而它们在服务器上完全解析.这会导致意外的键错误,并强制我的商店忽略处于初始状态的有问题的键.

initialState(来自服务器)

{ "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".意外的键将被忽略.

一切都在服务器上运行良好,但在客户端上初始化应用程序,同时暂时缺少一个reducer,直到它被加载导致此错误.有谁知道如何解决这个错误,或告诉redux不验证初始状态的形状？我需要"case"才能使用我的延迟加载减速器.

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

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