Question

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

initialState （来自服务器）

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

客户端redux期望initialState

这是基于可用的减速器

{ "user": {...} }

加载的Reducer

UserReducer

延迟加载的缩减器

CaseReducer

当我调用以下

时会发生错误

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

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

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

Answer 1

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

这两种编写组合减速器的方法完全相同：

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

1 个答案: