首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么API request会在reducer的action值中返回[object Object]?

API request在reducer的action值中返回object Object的原因是因为在请求API时,返回的数据是一个对象。在Redux中,action是一个普通的JavaScript对象,它描述了发生的事件和相关的数据。当API请求成功后,通常会将返回的数据作为action的payload属性传递给reducer进行状态更新。由于返回的数据是一个对象,当我们在reducer中打印action值时,会显示为object Object。

为了正确处理API请求返回的数据,我们需要在reducer中对action进行处理。可以通过在reducer中使用switch语句来根据action的类型进行不同的处理。在处理API请求成功的action时,可以从action的payload属性中获取返回的数据,并将其更新到相应的状态中。

以下是一个示例代码,展示了如何在reducer中处理API请求返回的数据:

代码语言:javascript
复制
// 定义action类型
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

// 定义reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case FETCH_DATA_SUCCESS:
      // 从action的payload属性中获取返回的数据
      const data = action.payload;
      // 将返回的数据更新到相应的状态中
      return {
        ...state,
        data: data
      };
    default:
      return state;
  }
};

// 创建action
const fetchDataSuccess = (data) => {
  return {
    type: FETCH_DATA_SUCCESS,
    payload: data
  };
};

// 在API请求成功后,调用fetchDataSuccess创建action,并将返回的数据作为payload传递
// dispatch(fetchDataSuccess(response.data));

// 在组件中使用connect函数将reducer中的状态映射到组件的props中
// const mapStateToProps = (state) => {
//   return {
//     data: state.data
//   };
// };

// 在组件中使用props中的数据进行渲染
// <div>{props.data}</div>

在上述示例中,我们定义了一个FETCH_DATA_SUCCESS的action类型,当API请求成功后,调用fetchDataSuccess创建一个action,并将返回的数据作为payload传递。在reducer中,根据action的类型进行不同的处理,当接收到FETCH_DATA_SUCCESS类型的action时,将返回的数据更新到相应的状态中。

请注意,上述示例中的代码仅为示意,实际使用时需要根据具体的应用场景进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React面试之生命周期与状态管理

React 生命周期 在 V16 版本引入了 Fiber 机制。这个机制一定程度上影响了部分生命周期调用,并且也引入了新 2 个 API 来解决问题。...所以对于 reconciliation 阶段调用几个函数,除了 shouldComponentUpdate 以外,其他都应该避免去使用,并且 V16 也引入了新 API 来解决这个问题。...对应 state const nextStateForKey = reducer(previousStateForKey, action) // 判断 state ,undefined...该函数里有一个过滤参数后对象 finalReducers,遍历该对象,然后执行对象每一个 reducer 函数,最后将新 state 返回。....` ) } // 再过滤一次,考虑到万一你在 reducer 给 ActionTypes.INIT 返回 // 传入一个随机 action 判断是否为 undefined

29040

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

Redux三大原则 唯一数据源 状态只读 数据改变只能通过纯函数(reducer)完成 Redux核心api Redux主要由三部分组成:store,reduceraction。...没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。 明白了这些之后,就可以开始编写 reducer,并让它来处理之前定义过 action。...遇到未知 action 时,一定要返回 state。 Object.assign 须知 Object.assign() 是 ES6 特性,但多数浏览器并不支持。...(译者注:Javascript对象存储时均是由和指向引用两个部分构成。此处突变指直接修改引用所指向, 而引用本身保持不变。)...主 reducer 并不需要设置初始化时完整 state。初始时,如果传入 undefined, 子 reducer 将负责返回它们默认

3.5K10

深入学习和理解 Redux

第三步:根 Reducer 会将多个不同 Reducer 函数合并到单独状态树。 第四步:Redux store会保存从根 Reducer 函数返回完整状态树。...store提供getState、dispatch、subscibe等方法,Redux store只能通过dispatch一个action,通过action来找对应 Reducer函数来改变。...Reduceraction对应一个可以修改storestate纯函数。 preloadedState代表之前state初始化状态。...官方文档这么定义reduce:reduce()方法对累加器和数组每个元素(从左到右)应用到一个函数,简化为某个。...首先得从Reducer说起,之前 Redux三大原则里面提到了reducer必须是纯函数,下面给出纯函数定义: 对于同一参数,返回同一结果 结果完全取决于传入参数 不产生任何副作用 至于为什么reducer

84320

redux原理分析

2.redux核心原理是什么?1.将应用状态统一放到state,由store来管理state。 2.reducer作用是返回一个新state去更新store对用state。...3.按redux原则,UI层每一次状态改变都应通过action去触发,action传入对应reducer reducer返回一个新state更新store存放state,这样就完成了一次状态更新...state时,需要返回一个state复制品,也就是需要返回一个深拷贝state之后对象,这样可以避免state非法篡改,因为如何直接返回state的话,只需通过statekey = xxxx就能对...connect组件接受一个component组件返回一个新component组件,在connect最终返回组件获取store并将store设置为当前组件state,并且在connect返回组件...函数调用,最终达到storestate与UIstate同步问题3.react-redux有哪些API

74620

Redux(五):源码分析之combineReducers

return null instead of undefined.` ) } 任何一个子reducer不应该返回undefined,如果没有返回至少也应该返回null。...unexpectedKeyCache用于存放那些不存在于preloadedStatekey。...唯一不同就是hasChanged这个变量,如果state没有发生变化则返回上一个previousState,否则返回nextState,虽然reducer无论如何总会执行,但如果本质上state没有改变那么也就没有必然返回一个引用地址不同但相同...The initial state may not be undefined, but can be null.` ) } }) } 总结起来就是: 任何子reducer返回都不应该是...三、总结 combineReducers参数必须是一个纯对象 对象参数value必须是函数 对象参数key必须与preloadedStatekey有对应 reducer不可以返回undefined

91850

Redux进阶(像VUEX一样使用Redux) 前言redux问题方案目标如何实现思考

} } } 通过上面的实现,我们基本解决了Redux本身一些瑕疵 1.在effects存放方法用于解决不支持异步、副作用问题 2.通过合并reduceraction, 将模板代码大大减少...另外一个则是要处理副作用的话,那就必须使用到了中间件,所以最后我们暴露出来函数返回应该具有上面两个属性,如下: import reduxSimp from '.....}) 代码实现思路就是最后返回一个函数,也就是我们通常写redux函数,函数内部遍历对应命名空间reducer,找到匹配reducer执行后返回结果 /** * 还原reducer函数...((reducer) => { // 返回匹配action if (action.type === `${namespace}/${reducer}`) { result...= state reducerArr.forEach((reducer) => { // 返回匹配action if (action.type === `${namespace

1.2K30

redux原理是什么

2.redux核心原理是什么?1.将应用状态统一放到state,由store来管理state。 2.reducer作用是返回一个新state去更新store对用state。...3.按redux原则,UI层每一次状态改变都应通过action去触发,action传入对应reducer reducer返回一个新state更新store存放state,这样就完成了一次状态更新...state时,需要返回一个state复制品,也就是需要返回一个深拷贝state之后对象,这样可以避免state非法篡改,因为如何直接返回state的话,只需通过statekey = xxxx就能对...connect组件接受一个component组件返回一个新component组件,在connect最终返回组件获取store并将store设置为当前组件state,并且在connect返回组件...函数调用,最终达到storestate与UIstate同步问题3.react-redux有哪些API

62730

Redux(四):源码分析之createStore

(注:结合es6解构赋值,可以在根reducer参数初始化,也可以结合combineReducers在子reducer参数初始化。所以通常可以不用指定preloadedState)。...用于增强redux功能,通常与之结合就是中间件系统。 返回返回一个redux store,包含一些方法如:dispatch()、subscribe()、getState()等。...通过中间件拓展,action可以是promise、函数,但最终传递给底层依然是纯对象。 195行处可以看到执行reducer来计算得出新currentState并覆盖之前。...,并派发一个Redux私有action,这个actiontype是一个随机。...} 这个函数很巧妙,Object.getPrototypeOf()用于返回对象原型,在js数组、对象、日期、正则typeof运算结果都是object: console.log(typeof []

1.2K50

redux你用对了吗?

redux 三大原则 redux 开发和使用必须要遵循三大原则,即: 单一数据源:整个应用 state 被储存在一棵 object tree ,并且这个 object tree 只存在于唯一一个...add 返回永远只依赖他入参 a 和 b,不管外部变量 x 如何变化,也不会影响到函数 add 返回。...为什么reducer需要返回一个全新state 上面我们介绍了什么是纯函数,redux 里面规定 reducer 必须是一个纯函数,并且每个纯函数需要返回一个全新state,那么这里大家肯定就有一个疑问...,为什么 reducer 必须要返回一个全新 state,直接修改完了 state 再返回不行吗?...,什么是纯函数,以及为什么 reducer 需要返回一个全新 state ?

56030

fish_redux使用详解---看完就会用!

Actionpayload字段,然后在effect,reduceraction参数拿到payload去处理就行了 这地方需要注意下,默认生成模板代码,returnAction类加了const...如果在调用action里面的XxxxActionCreator类方法,相应枚举字段,会在combineEffects中被调用,在这里,我们就能写相应方法处理逻辑,方法带俩个参数:action...,ctx action:该对象,我们可以拿到payload字段里面,在action里面保存 ctx:该对象,可以拿到state参数,还可以通过ctx调用dispatch方法,调用action方法...,需要把系统包Action类隐藏掉 传直接用pushNamed方法即可,携带参数可以写在arguments字段;pushNamed返回是Future类型,如果想获取他返回,跳转方法就需要写成异步...( (result as Map)["secondValue"]) ); } reducer 这里就是从action里面获取传递,赋值给克隆对象msg字段即可 Reducer<FirstState

2.6K43

造一个 redux 轮子

为了解决这个问题,可以在 createStore 时候直接 dispatch 一个 action,这个 action 不命中所有 reducer case,那么 reducer返回初始,以此达到初始化...state 目的,这也是为什么reducer switch-case default 一定要返回 state 而不是啥都不处理。...subscribe 返回为 unsubscribe 函数,这一是种很常用编码设计:如果一个函数有 side-effect,那么返回最好就是取消 side-effect 函数,例如 useEffect...参考 dispatch 传入 action 返回 action 思路,我们也可以弄一个传入旧 dispatch 返回新 dispatch 函数嘛。...[key] = reducer } }, {}) let shapeAssertionError: Error try { // 检查 reducer 返回是否有 undefined

1.5K20
领券