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

Redux Toolkit:错误:操作必须是纯对象。使用自定义中间件进行异步操作

Redux Toolkit是一个用于简化Redux开发的官方工具集。它提供了一组实用的函数和API,帮助开发者更轻松地编写Redux代码,并解决了一些常见的痛点。

在使用Redux Toolkit进行异步操作时,如果出现错误"操作必须是纯对象",通常是因为在Redux中的action中使用了非纯对象的操作。Redux要求action必须是一个纯对象,即一个普通的JavaScript对象,而不是一个函数、Promise或其他类型的对象。

为了解决这个问题,可以使用Redux Toolkit提供的createAsyncThunk函数来处理异步操作。createAsyncThunk是一个高阶函数,它接受两个参数:一个字符串类型的action类型和一个异步的回调函数。回调函数可以返回一个Promise,用于执行异步操作,并在操作完成后返回结果。

下面是一个使用Redux Toolkit处理异步操作的示例:

代码语言:txt
复制
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 创建异步操作的Thunk
const fetchUser = createAsyncThunk('user/fetchUser', async (userId, thunkAPI) => {
  // 执行异步操作,比如发送网络请求
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();

  return data;
});

// 创建slice
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

// 导出reducer和异步操作的Thunk
export const { reducer } = userSlice;
export { fetchUser };

在上面的示例中,我们首先使用createAsyncThunk创建了一个名为'fetchUser'的异步操作Thunk。然后,在extraReducers中,我们根据不同的异步操作状态(pending、fulfilled、rejected)更新了state中的loading、data和error字段。

使用Redux Toolkit的createAsyncThunk可以更方便地处理异步操作,并且遵循Redux的规范。对于Redux Toolkit的更多信息和使用方法,可以参考腾讯云的Redux Toolkit产品介绍页面:Redux Toolkit产品介绍

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

相关·内容

Redux介绍及源码解析

同时 Redux 利用函数简单明了的特点, 在 Flux 架构的基础上进行了优化和功能增强 (支持中间件异步等), 降低了复杂度, 同时还提供强大的工具库支持 (React-ReduxRedux-Toolkit...:action 一个对象, 用来描述发生的具体事件, 由事件类型和所带的 payload, 在用户事件触发后, action 会被 dispatch, 其 payload 完全透明的传递, 所以使用者可以自定义参数...在 Redux 中, reducer 必须一个函数, 不能有任何的副作用, 当然也不支持异步逻辑, 大概长下面这样.const reducer = (state = initialState, action...函数只能接收对象作为参数, 如果要触 action Promise、Observable、thunk 或者其他类型, 需要引入对应的中间件进行处理, 函数的执行流程大致如下图片function...中间件可以进行各种异步操作、日志记录等等, 比如说用的最多的中间件应该就是 redux-thunk, 这是与 Flux 的重要区别之一.

2.5K20

Redux 做状态管理,真的很简单🦆!

1.3 设计思想 Redux 既然状态管理库,那么接下来掌握一下基本的数据流概念和原则 (1) 单一数据源 整个应用的 全局 state 被储存在一棵对象树(object tree)中,并且这个对象树只存在于唯一...因此 state 只读的!唯一改变 state 的方法就是触发 action,action 一个用于描述已发生事件的普通对象。...@redux/toolkit 显著提升了研发的效率,降低了研发的使用心智负担!...三、扩展知识 3.1 @redux/toolkit API 在上述的实际案例中,用到了如下 API: configureStore(): 简化 Store 的创建,默认创建了执行异步中间件,自动启用...简单总结一下: 推荐在 React 项目中使用 Redux 作为状态管理 需要掌握 Redux 中的设计思想 推荐使用 @redux-toolkit,可降低心智负担,显著提升研发效率 当掌握 @redux-toolkit

3.4K40

React与Redux开发实例精解

3.style的属性值不能字符串而必须对象对象中的属性名使用驼峰命名法,如font-size为fontSize 4.注释写在{}内 5.数组会自动展开所有成员,但是如果数组或迭代器中的每一项都是...函数,不要在reducer中做这些事情:修改传入参数;执行有副作用的操作;调用非函数 九、Action创建函数与Redux Thunk中间件 1.Redux Thunk中间件可以让action创建函数先不返回...和方法,还进行了性能优化,可以避免不必要的重新渲染 十一、React与Redux的连接:使用react-redux连接 1.使用react-redux 2.Provider的职能通过context将store...,它不仅可以通过链式操作帮助我们摆脱回调地狱,还可以在链式操作过程中的任何时刻捕捉异常 3.Redux只能实现同步操作,但是可以通过Thunk中间件实现异步 十七、自定义Redux中间件 1.自定义Redux...,并在其回调中进行渲染即可 二十一、多页面下的异步操作 1.redux-amrc封装了Redux中的重复性异步操作,只需要将Promise和key值传给redux-amrc,它会完成接下来的所有异步操作

2.1K20

reduxjs-toolkit 案例 — 登录

bug收集:专门解决与收集bug的网站 网址:www.bugshouji.com redux新版本移动了@reduxjs/toolkit 这个库中, 不再使用类似redux-thunk等中间件,大大地简化了开发的流程...|- userSlice.js 用户切片 |- index.js 入口文件 |- pages 页面级组件 |- login.js 登录组件 案例:登录,调用redux中定义的异步数据,并保存数据...,不能写异步操作 }, extraReducers:{ // userLogin return 的值放在action.payload属性 // payload...// 发起请求的操作redux 中的action中进行 /* Redux工具箱导出一个unwrapResult函数,该函数可用于提取已完成操作的有效负载,...或抛出错误,或抛出rejectWithValue从已拒绝操作创建的有效负载(如果可用)。

1.1K20

深入理解redux

最后,调用 dispatch({}) 来初始化状态,并返回包含 dispatch、subscribe和getState 方法的对象 中间件 redux 还有较为强大的一点就是中间件,如果你对服务端相关的框架有一定的了解...,如果你要在 react 项目中使用 redux,那就 @reduxjs/toolkit react-redux 之前我们没说到 redux toolkitredux 我们也看到了,在实际业务中编写...reducer 又臭又长,而 toolkit 就是在 redux 的基础上能够简化了大多数 Redux 任务,避免了常见错误,使得编写 Redux 应用程序更容易了,可以把它称为 redux 的最佳实践...redux 的三个原则:单一数据源、状态只读的、使用函数来执行状态更改。文章描述了如何应用它们以及它们的好处。...redux 使用 action 来描述状态更改,reducer 根据 action 来更新状态,而 middleware 则用于处理异步操作和副作用 redux toolkit一个官方推荐的 redux

67550

单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

redux Redux使用一个对象存储整个应用的状态(global state),当global state发生变化时,状态从树形结构的最顶端往下传递。每一级都会去进行状态比较,从而达到更新。...dispatch(action) 同步的,如果要处理异步 action,需要使用一些中间件 Redux 提供了一个 applyMiddleware 方法来应用中间件: const store = createStore...thunk就是简单的action作为函数,在action进行异步操作,发出新的action。...Action== - 状态更新计算:==reducer== - 限制:reducer必须函数,不支持异步 - 特性:支持中间件 ###### VUEX - 核心对象:store - 数据存储:state...,Vuex的想法把同步和异步拆分开,异步操作想咋搞咋搞,但是不要干扰了同步操作

3.6K40

React之redux学习日志(reduxreact-reduxredux-saga)

/action-type' // 创建一个默认的仓库,一般提出来会更加清晰 const defaultState = { userInfo: {} } // reducer必须一个函数 const...userInfo: {} //} // 转换为 immutable 数据格式 const defaultState = fromJS({ userInfo: {} }) // reducer必须一个函数...当我们需要执行一些异步操作时,由于action中只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga常见的两种中间件。   ...备注:redux-saga函数必须一个Generator函数 拓展:还可以通过以下代码来将saga进行模块化: import { all, fork } from 'redux-saga/effects...、react-redux的基本用法和redux-saga中间件使用,若有错误请各路大佬指出加以改正和学习 智者说话,是因为他们有话要说;愚者说话,则是因为他们想说。

54130

Redux】:Redux 指北

上述这些功能 isDispatching变量负责实现 ---- createStore.ts 中还有有一些逻辑,是为了即使不恰当地使用 redux,也能规避掉错误。...Redux 如何处理异步 9.1. 异步逻辑应该写在哪? 异步逻辑不能直接写在 reducer 中 异步逻辑应放置在 Redux中间件中处理 !! Middleware !!...Redux中间件实质 store.dispatch函数的增强器 它们拦截特定的Action 并在其中把带有副作用的工作完成 (例如:异步处理、日志记录...) 9.2....action 的处理上更加细致 store.dispatch({type:"INC", payload: Promise}); redux-saga: redux-saga 功能强大、复杂的异步中间件...: redux-saga 没有变动 action 的本来含义,仍然一个普通的 JS 对象; 有强大的异步流程控制功能(例:takeEvery、takeLatest); 异步业务逻辑被集中在 Saga

1.5K40

2023再谈前端状态管理

函数修改 通过 reducer 修改状态,reducer 函数,它接收之前的 state 和 action,并返回新的 state。记住,一定要返回一个新的对象,而不是修改之前的 state。...如何处理异步 redux没有规定如何处理异步数据流,最原始的方式就是使用Action Creators,也就是在制造action之前进行各种的异步操作,你可以把要复用的操作抽离出来。...当然这样并不优雅,在实际项目中我们通常使用类似redux-thunk、redux-saga这些中间件来支持处理异步。...比如,redux toolkit就旨在让开发者使用标准方式编写 redux 逻辑。...集成异步处理:记录异步操作时的执行状态,简化视图中对于等待或错误的处理逻辑。 支持组件 Class 写法:友好的兼容策略可以让老项目享受轻量状态管理的乐趣。

82210

React 入门学习(十四)-- redux 基本使用

,还有很多情况都需要使用 Redux 来实现(还没有学 hook,或许还有更好的方法) (从掘友的文章里截的图) 这张图,非常形象的将 React 和 采用 Redux 的区别体现了出来 2....Redux 三个核心概念 1. store store Redux 的核心,可以理解为 Redux 的数据中台,我们可以将任何我们想要存放的数据放在 store 中,在我们需要使用这些数据时,我们可以从中取出相应的数据...store 中唯一的数据来源,一般来说,我们会通过调用 store.dispatch 将 action 传到 store 我们需要传递的 action 一个对象,它必须要有一个 type 值 例如,这里我们暴露了一个用于返回一个...,会返回一个 action 对象 3. reducer 在 Reducer 中,我们需要指定状态的操作类型,要做怎样的数据更新,因此这个类型必要的。...reducer 会根据 action 的指示,对 state 进行对应的操作,然后返回操作后的 state 如下,我们对接收的 action 中传来的 type 进行判断 export default

46920

React 入门学习(十四)-- redux 基本使用

,还有很多情况都需要使用 Redux 来实现(还没有学 hook,或许还有更好的方法) (从掘友的文章里截的图) 这张图,非常形象的将 React 和 采用 Redux 的区别体现了出来 2....Redux 三个核心概念 1. store store Redux 的核心,可以理解为 Redux 的数据中台,我们可以将任何我们想要存放的数据放在 store 中,在我们需要使用这些数据时,我们可以从中取出相应的数据...store 中唯一的数据来源,一般来说,我们会通过调用 store.dispatch 将 action 传到 store 我们需要传递的 action 一个对象,它必须要有一个 type 值 例如,这里我们暴露了一个用于返回一个...,会返回一个 action 对象 3. reducer 在 Reducer 中,我们需要指定状态的操作类型,要做怎样的数据更新,因此这个类型必要的。...reducer 会根据 action 的指示,对 state 进行对应的操作,然后返回操作后的 state 如下,我们对接收的 action 中传来的 type 进行判断 export default

55820

深入学习 Redux中间件异步操作

一、什么中间件 ---- 如果我们框架作者,要添加功能,会在哪个环节添加: ① Reducer:函数,只承担计算 State 的功能,不合适承担其他功能,而且理论上函数不能进行读写操作。...这时,就要使用中间件 redux-thunk。...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用 redux-thunk 中间件改造 store.dispatch。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用 redux-promise 中间件。...注意,createAction的第二个参数必须一个 Promise 对象。 看一下 redux-promise 的源码,就会明白它内部怎么操作的。

1.1K20

Redux 入门教程(二):中间件异步操作

(1)Reducer:函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,函数不能进行读写操作。...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用redux-promise中间件。...注意,createAction的第二个参数必须一个 Promise 对象。 看一下redux-promise的源码,就会明白它内部怎么操作的。...中间件异步操作,就介绍到这里。下一篇文章将是最后一部分,介绍如何使用react-redux这个库。 (完)

1.4K40

深入Redux架构

所以,State 的变化必须 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。 Action 一个对象。...(1)Reducer:函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,函数不能进行读写操作。...有的中间件有次序要求,使用前要查一下文档。比如,logger就一定要放在最后,否则输出结果会不正确。 异步操作的基本思路 理解了中间件以后,就可以处理异步操作了。...这个函数执行后,先发出一个Action(requestPosts(postTitle)),然后进行异步操作。...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch。

2.2K60

redux redux-toolkit 与 rematch 对比总结

在前面的几篇文章里我们知道了 redux redux-toolkit 和 rematch 如何使用: # React/ReactNative 状态管理: redux 如何使用 # React/ReactNative...状态管理: redux-toolkit 如何使用 # React/ReactNative 状态管理: rematch 如何使用 这篇文章里,我们来站在更高的角度对比总结一下。...本文主要内容: 什么状态管理 有哪些方案,优缺点和使用场景 Redux React-Redux Redux-Toolkit 和 Rematch 的区别 什么状态管理 状态(State),就是影响 UI..."^1.4.0", redux 官方推荐通过 toolkit 使用 redux,以减少模板代码: Redux Toolkit 的本质提供了一些工具函数,简化手写 Redux 代码的冗余逻辑,其中最重要的两个工具函数...Redux Toolkit 实际上 Redux 应用的官方套件,它提供了一些有用的工具来帮助简化 Redux 应用程序中的常见任务,例如简化构建 store 的方式、处理异步请求、处理原生的 action

1.9K60

字节前端面试被问到的react问题

redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。...redux使用不可变状态,这意味着状态只读的,不能直接去修改它,而是应该返回一个新的状态,同时使用函数;mobx中的状态可变的,可以直接对其进行修改mobx相对来说比较简单,在其中有很多的抽象,mobx...更多的使用面向对象的编程思维;redux会比较复杂,因为其中的函数式编程思想掌握起来不是那么容易,同时需要借助一系列的中间件来处理异步和副作用mobx中有更多的抽象和封装,调试会比较困难,同时结果也难以预测...;而redux提供能够进行时间回溯的开发工具,同时其函数以及更少的抽象,让调试变得更加的容易react-redux 的实现原理?...可以使用自定义事件通信(发布订阅模式)可以通过redux进行全局状态管理如果兄弟组件通信,可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。为什么不直接更新 state 呢 ?

2.1K20

React 原理问题

类组件中的优化手段 1、使用组件 PureComponent 作为基类 2、使用 React.memo 高阶函数包装组件 3、使用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑...什么 suspense 组件? Suspense 让组件“等待”某个异步操作,直到该异步操作结束即可渲染 17. 为什么 JSX 中的组件名要以大写字母开头?...数据可变性的不同 Redux强调的对象的不可变性,不能直接操作状态对象。而是在原来状态对象的基础上返回一个新的状态对象,最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4....状态更新方式不同 得益于 Mobx 的 observable,使用 mobx 可以做到精准更新 对应的 Redux 用 dispath 进行广播,通过Provider 和 connect 来比对前后差别控制更新粒度...20. redux 有哪些异步中间件

2.5K00

高频React面试题及详解

: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质上JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作...保存数据,数据变化后自动处理响应的操作 redux使用不可变状态,这意味着状态只读的,不能直接去修改它,而是应该返回一个新的状态,同时使用函数;mobx中的状态可变的,可以直接对其进行修改 mobx...相对来说比较简单,在其中有很多的抽象,mobx更多的使用面向对象的编程思维;redux会比较复杂,因为其中的函数式编程思想掌握起来不是那么容易,同时需要借助一系列的中间件来处理异步和副作用 mobx中有更多的抽象和封装...但是在一定规模的项目中,上述方法很难进行异步流的管理,通常情况下我们会借助redux异步中间件进行异步处理. redux异步中间件其实有很多,但是当下主流的异步中间件只有两种redux-thunk、...redux-saga,当然redux- observable可能也有资格占据一席之地,其余的异步中间件不管社区活跃度还是npm下载量都比较差了. redux异步中间件之间的优劣?

2.4K40

学习react-redux,看这篇文章就够啦!

# reducer 编写规则 只根据 state 和 action 参数计算新的状态值 不允许修改现有的 state 值,必须通过复制现有的值 不能做任何异步操作逻辑、以及副作用【可以通过插件接触此问题...包含 actions 对象的函数,不可是异步函数。但可以借助 thunk 中间件的能力,在 action 函数内部执行异步操作。...在 React Redux 中,如果你想在组件挂载后执行异步操作或订阅状态变化,可以使用该钩子函数。...2、vuex 只适用于 vue 框架之中 # 设计上 1、redux redux 中不可以直接修改原始 state 数据,需要拷贝原数据进行修改 不可执行异步操作,但可以通过中间件处理异步操作 2、vuex...需要使用第三方中间件来处理异步操作。 # vuex Vuex 的优点: 与 Vue.js 集成:作为 Vue.js 的官方状态管理库,与 Vue.js 的集成非常方便。

25220

Redux原理分析以及使用详解(TS && JS)

很多人认为redux必须要结合React使用,其实并不是的,Redux JavaScript 状态容器,只要你的项目中使用到了状态,并且状态十分复杂,那么你就可以使用Redux管理你的项目状态,它可以使用在...,派发给 redux Store 的 action 对象,会被 Store 上的多个中间件依次处理,值得注意的这些中间件会按照指定的顺序一次处理传入的 action,只有排在前面的中间件完成任务之后,...换言之,中间件都是对store.dispatch()的增强 四、redux异步流 在多种中间件中,处理 redux 异步事件的中间件,绝对占有举足轻重的地位。...redux-saga将react中的同步操作异步操作区分开来,以便于后期的管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听的Action...,但是,这整个Action方法,返回的一个async,async其实本质也就是promise对象,那么又是一个异步对象,所以它的外部不会等待,当代码执行到await这块, 因为需要时间来调用接口,所以会跳出去

4K30
领券