React-Redux：组合reducer：意外密钥

Question

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

我怎样才能正确组合减速器？

Answer 1

我认为您只需要为其他密钥添加reducer，例如

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

来自the docs：

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

如果您不需要处理与one或two相关的任何操作，只需将它们拉入最初，这可能就像

export default combineReducers({
  events,
  flash,
  one: (state = {}) => state,
  two: (state = {}) => state
})

Answer 2

tl;博士

如果你做SSR，重新编译你的服务器端捆绑！

说明

当您执行服务器端呈现（SSR）时，会出现此错误消息，更改reducer代码中的某些内容，并且您只在客户端重新编译/ HMR。

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

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

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