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

这会导致功能中断,并导致console error个:

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]
)

如何正确组合减速器?

推荐答案

我认为你只需要为额外的键添加减速机,例如.

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

the docs开始:

如果使用组合减速器生成减速器,则该对象必须是与传递给它的关键帧具有相同形状的普通对象.否则,你可以自由地传递任何你能理解的东西.

如果您不需要处理与onetwo相关的任何操作,只需在开始时将其拉入即可,这可以非常简单

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

Reactjs相关问答推荐

将对象添加到集合中的数组时的no_id字段

Reaction Ploly:如何在多个子情节中共享zoom 状态

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

MUiv5和TSS-Reaction SSR问题:无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

使用自动播放的视频组件呈现登录页面时出现JEST测试错误

错误:无法获取 RSC 负载.返回浏览器导航

在reactjs中刷新页面时丢失状态值

我从 S3 存储桶下载图像时收到错误

在react的useEffect钩子中,我的函数被调用,但只有第一个函数能够改变状态,第二个函数无法改变状态.

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么?

如何在next.js 13中仅在主页导航栏上隐藏组件?

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误:没有当前用户

条件渲染元素的测试不起作用

为嵌套路由配置一个不存在的 url 的重定向

Cypress 组件测试不渲染react 组件(但它的内容)

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

react 测试显示错误的结果

react 本机日历

使用 React 中的功能组件更改另一个组件的状态

react 路由dom没有路由匹配位置错误/在路由中制作组件