具有代码拆分和延迟加载的减速器的同构 Redux [英] Isomorphic Redux with code splitting and lazy loaded reducers

问题描述

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

I am building an isomorphic application with code splitting using react router and redux. I have gone about as far as I can, but I need some help to figure out the rest of my problem. I have a large application that requires code splitting for the front end. I have a reducer registry that enables me to register new reducers(lazy loaded), or replace existing reducers in my store. This works great, however because sections of my app are lazy loaded, my lazy loaded reducers are not present when I call combineReducers() on the client side, while they resolve perfectly on the server. This causes an unexpected keys error, and forces my store to ignore the offending key(s) in my initial state.

initialState(来自服务器)

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

客户端 redux 预期初始状态

这是基于可用的减速器

{ "user": {...} }

加载减速器

• UserReducer

延迟加载的减速器

• CaseReducer

当我调用以下时发生错误

The error occurs when I call the following

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

在传递给 createStore 的 initialState 参数中发现意外的关键case".期望找到已知的减速器键之一:用户".意外的键将被忽略.

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

Everything works well on the server, but initializing the app on the client while momentarily missing a reducer until it is loaded is causing this error. Does anyone know how to get around this error, or tell redux to not validate the shape of the initial state? I need "cases" to be available to my lazy loaded reducer.

推荐答案

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

It seems like you should opt not to use the built-in combineReducers, since you know the warning isn't applicable to your usage. From the Redux guide:

这两种编写组合式reducer的方法是完全等价的:

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

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

So you may as well go with the second option.

这篇关于具有代码拆分和延迟加载的减速器的同构 Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！