50

在我开始组合我的 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]
)

如何正确组合减速器？

4

2 回答 2

64

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

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

从文档：

如果您使用 combineReducers 生成 reducer，则这必须是一个普通对象，其形状与传递给它的键的形状相同。否则，您可以自由传递您的减速器可以理解的任何内容。

如果您不需要处理与oneor相关的任何操作two，只需最初将它们拉入，这可能很简单

export default combineReducers({
  events,
  flash,
  one: (state = {}) => state,
  two: (state = {}) => state
})
于 2015-11-12T18:00:25.590 回答
10

tl;博士

如果您执行 SSR，请重新编译您的服务器端包！

解释

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

当您执行 SSR 时，您必须将您的 Redux 存储序列化为一个全局变量（如window.__INITIAL_STATE__），因此当您初始化客户端时，createStore可以读取它并构建相同的 Redux 状态。

如果您不为服务器端重新编译修改后的代码，则来自服务器的初始状态可能仍包含具有旧键的状态（来自旧的减速器），而客户端具有新状态（来自新/修改的减速器） ）。

从技术上讲，这不会破坏客户端的工作方式，因为 Redux 忽略了意外的键，它只是一个有用的警告（不是真正的错误），它会记住您重新编译服务器端包。但是，这可能是生产或基准水合性能时的一个问题，因为不同的状态可能会导致不同的 DOM。当然，这个错误不应该在生产中发生，因为您的部署过程应该自动创建客户端和服务器端包。

于 2018-03-08T09:09:48.930 回答