reactjs – React-Redux:组合reducers:意外的键

我的应用程序在我开始结合我的Redux reducer之前工作正常。但是当我结合起来,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({},{ events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,flash
})

这导致功能不正确和控制台错误

在initialState参数中发现意外的键“一”,“二”,传递给createStore。期望找到一个已知的reducer键,而不是“事件”,“闪存”。意外的键将被忽略。

我的初始状态在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]
)

如何正确地组合reducer?

我想你只需要添加reducers的附加键,例如
function one(state = {},action) {
  switch (action.type) {
  case ONE_UPDATED:
    return action.one
  default:
    return state
  }
}

the docs

If you produced reducer with combineReducers,this must be a plain object with the same shape as the keys passed to it. Otherwise,you are free to pass anything that your reducer can understand.

如果您不需要处理与一个或两个相关的任何操作,只需将它们初次拉出,这可能就如此简单

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

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...