reactjs-React-Redux:合并化简器:意外的键

在开始组合Redux减速器之前,我的应用程序运行良好。 但是当我合并时,initialState和reducer键混合在一起了。

function flash(state = [], action) {
  switch (action.type) {
  case FLASH_MESSAGE_UPDATED:
    return _.extend({}, state, { flash: action.flash })
  default:
    return state
  }
}

function events(state = [], action) {
  switch (action.type) {
  case EVENTS_UPDATED:
    return _.extend({}, state, { events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,
  flash
})

这会导致功能中断和控制台错误:

Unexpected keys "one", "two" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "events", "flash". Unexpected keys will be ignored.

我的初始状态是通过redux-thunk传递的。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../../reducers/event'

let initialState = {
  one: globalData.one,
  two: globalData.two,
  events: globalData.events,
  flash: globalData.flash
}
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let reduxStore = createStoreWithMiddleware(reducer, initialState);

React.render(
  <Provider store={reduxStore}>
    <EventListContainer />
  </Provider>,
  $('.events')[0]
)

如何正确组合减速器?

steel asked 2020-02-18T17:21:27Z
2个解决方案
62 votes

我认为您只需要为其他键添加减速器,例如

function one(state = {}, action) {
  switch (action.type) {
  case ONE_UPDATED:
    return action.one
  default:
    return state
  }
}

从文档:

如果您使用CombineReducers生产了reducer,则它必须是形状与传递给它的键相同的普通对象。 否则,您可以自由传递减速器可以理解的任何内容。

如果您不需要处理与onetwo相关的任何动作,只需将它们拉入即可,这可能很简单

export default combineReducers({
  events,
  flash,
  one: (state = {}) => state,
  two: (state = {}) => state
})
nrabinowitz answered 2020-02-18T17:21:54Z
9 votes

tl; dr

如果执行SSR,请重新编译服务器端捆绑包!

说明

当您执行服务器端渲染(SSR),更改化简器的代码中的某些内容并且仅在客户端上重新编译/ HMR时,可能会出现此错误消息。

执行SSR时,您必须将Redux存储序列化为全局变量(例如window.__INITIAL_STATE__),因此在初始化客户端时,createStore可以读取并建立相同的Redux状态。

如果不为服务器端重新编译修改后的代码,则服务器的初始状态可能仍包含带有旧键的状态(来自旧的reducers),而客户端具有新状态(来自新的/修改后的reducer) )。

从技术上讲,这不会破坏客户端的工作方式,因为Redux会忽略意外的密钥,这只是一个有用的警告(并非真正的错误),它会记住您重新编译服务器端捆绑软件。 在生产过程中或在对水化性能进行基准测试时,这可能是一个问题,因为不同的状态可能会导致不同的DOM。 当然,此错误不应在生产中发生,因为您的部署过程应自动创建客户端和服务器端捆绑包。

totymedli answered 2020-02-18T17:22:42Z
translate from https://stackoverflow.com:/questions/33677833/react-redux-combining-reducers-unexpected-keys