Reactjs React Redux：合并还原程序失败

我有一个使用Redux和Redux Thunk构建的React应用程序。一切都很好，直到我试着按每一步组合减速器

给定初始功能减速机

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

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

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

// either with simple reducer composition
export default function bigReducer(state = {}, action) {
  return {
    flashReducer: flashReducer(state.flash, action),
    eventReducer: eventReducer(state.events, action)
  } 
}

// or with the combineReducers function
export default const reducer = combineReducers({
  flashReducer,
  eventReducer
})

当我尝试创建复合减速器时

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

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

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

// either with simple reducer composition
export default function bigReducer(state = {}, action) {
  return {
    flashReducer: flashReducer(state.flash, action),
    eventReducer: eventReducer(state.events, action)
  } 
}

// or with the combineReducers function
export default const reducer = combineReducers({
  flashReducer,
  eventReducer
})

初始状态和还原剂似乎混淆了

// logging the state
var EventListContainer = connect((state) => {
  console.log(state)
  return { events: state.events })(React.createClass({ ...

// returns the incorrect state
# => Object {flashReducer: Array[0], eventReducer: Array[17]}

---

如何使用React和Redux组合减速器？

我从文档中了解到，已命名减速器被授权仅处理状态的该部分，并使用与减速器名称对应的顶级键。所以

const reducer = combineReducers({
  flashReducer,
  eventReducer
})

意味着你有类似于状态的

const state = {
  flashReducer: {...},
  eventReducer: {...}
}

因此，您需要a）将reducer命名为它们应该管理的顶级键，b）将其默认状态仅表示完整状态对象的子集：

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

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

const reducer = combineReducers({
  flash,
  events
})

---

查看我的更新。您不需要根据状态键命名reducer函数，但如果您使用

组合reducer

，则需要将reducer键与状态键对齐。对于任何混淆，请原谅，请养成先发布最小答案，然后将扩展答案作为更新的习惯。Eureka，就是这样做的。不知道我怎么会错过，这很关键。谢谢。看这里的医生：这非常有用。Redux文档中根本没有提到。