createAsyncThunk完整用法介绍

createAsyncThunk 是 Redux Toolkit 库中的一个功能,它用于创建处理异步逻辑的 thunk action creator。Redux Toolkit 是一个官方推荐的库,用于简化 Redux 开发过程,特别是处理常见的 Redux 模式,如异步数据流。createAsyncThunk 自动处理了诸如派发不同阶段的 action(如 pending、fulfilled、rejected)、取消正在运行的异步操作等功能,使得编写异步 Redux 逻辑变得更加简洁和高效。

基本用法

首先,确保你已经安装了 @reduxjs/toolkit

npm install @reduxjs/toolkit

然后,你可以这样使用 createAsyncThunk

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';// 定义异步操作
const fetchUserById = createAsyncThunk('users/fetchById', // 第一个参数是 action type 的基础名称,Redux Toolkit 会自动为pending、fulfilled、rejected添加后缀async (userId, thunkAPI) => {try {const response = await axios.get(`/api/users/${userId}`);return response.data;} catch (error) {return thunkAPI.rejectWithValue(error.message); // 错误处理,将错误信息传递给 payload}}
);// 创建 Slice
const userSlice = createSlice({name: 'user',initialState: {data: null,status: 'idle', // 或 'loading', 'succeeded', 'failed'error: null,},extraReducers: (builder) => {builder.addCase(fetchUserById.pending, (state) => {state.status = 'loading';}).addCase(fetchUserById.fulfilled, (state, action) => {state.status = 'succeeded';state.data = action.payload;}).addCase(fetchUserById.rejected, (state, action) => {state.status = 'failed';state.error = action.error.message;});},
});export default userSlice.reducer;// 在组件中 dispatch 异步 action
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { fetchUserById } from './userSlice';function UserDetail({ userId }) {const dispatch = useDispatch();const user = useSelector((state) => state.user.data);const status = useSelector((state) => state.user.status);useEffect(() => {if (status === 'idle') {dispatch(fetchUserById(userId));}}, [status, dispatch, userId]);// ...
}

解释

  • createAsyncThunk: 接收两个参数,第一个是action的类型前缀,第二个是一个异步函数,该函数可以访问到 thunkAPI 对象,它提供了 dispatchgetState 和其他有用的方法。
  • extraReducers: 在创建的 slice 中,使用 extraReducers 来处理由 createAsyncThunk 自动生成的不同状态的 action。
  • 状态管理: 异步操作的状态(如 loading、success、failure)通常会反映在 Redux 状态中,以便 UI 能够根据状态展示不同的内容或加载指示器。
  • 组件中使用: 在需要的地方使用 useDispatchuseSelector 来 dispatch 异步 action 并获取状态。

createAsyncThunk 提供了一种清晰、统一的方式来管理 Redux 中的异步逻辑,减少了样板代码,并提高了代码的可读性和可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu安装或删除cmake

如果你是第一次安装cmake,直接敲如下命令就可以了: sudo apt update sudo apt-get install cmake 如果发现之前安装的cmake不能被损坏或者不能用了,就要把之前的cmake重新安装,那么我们就要先卸载之前的cmake,敲如下…

机器视觉——找到物块中心点

首先先介绍一下我用的是HALCON中的HDevelop软件。 大家下载好软件后可以测试一下: 在程序编辑器窗口中输入下面指令: read_image(Image,monkey) 那么如果出现这样的图片,说明是没有问题的 那么本次编程采用的是下面这张图片 我们要达到的…

CompletableFuture的底层他是如何实现的

底层原理 CompletableFuture是Java8中引入的新特性,像我们平常遇到的, 某一个计算过程依赖于另外一个计算过程的结构,这些结构就类似于一种链表的形式来体现,每一个阶段都代表着一种异步的操作, 然后这些阶段又是相互依赖的, 基于一种链式的操作. 官方点来解释就是 每个 Comple…

【论文复现|智能算法改进】基于改进麻雀算法的无线传感器网络覆盖优化研究

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法(SSA)原理及实现 WSN数学模型 2.改进点 基于Sobol序列和ICMIC混沌映射的种群初始化 ICMIC是一种无线映射折叠次数的映射模型: { z n 1 sin ⁡ ( α π…

客户案例|Zilliz Cloud 助力点石科技转型 AI 智能服务商

福建点石科技网络科技有限公司成立于2010年,是国家高新技术企业,阿里云、蚂蚁金服等大厂海内外生态合作伙伴ISV。在餐饮、零售、酒店、旅游、商圈的行业定制化服务化上有深厚积累,在境内外做了大量标杆性软件项目,如东南亚RWS圣淘…

Vite + Vue 3 前端项目实战

一、项目创建 npm install -g create-vite #安装 Vite 项目的脚手架工具 # 或者使用yarn yarn global add create-vite#创建vite项目 create-vite my-vite-project二、常用Vue项目依赖安装 npm install unplugin-auto-import unplugin-vue-components[1] 安装按需自动导入组…

Python | 试卷刷题and基础笔记

1.下列转义字符中, 属于“回车”含义的是 \n 换行 \r 回车 2.for循环遍历字典 在Python中,你可以使用for循环来遍历字典的键(keys)、值(values)或者键-值对(items)。下面是三种遍历…

supervisord常用命令及服务配置记录

whereis supervisor主进程配置文件:/etc/supervisord.conf 子进程配置文件:/etc/supervisor/conf.d 启动supervisor服务 sudo supervisord -c /etc/supervisor/supervisord.conf关闭supervisor则执行命令 sudo supervisorctl shutdown重启supervisor则…

Postman接口测试笔记(超详细)

基于工具Poatman的接口自动化基础应用以及接口关联 一、什么是接口? 硬件接口:USB接口,投影仪接口,鼠标键盘接口 软件接口:称为API,主要使用于数据交互 软件接口分类: 内部接口&#xff1a…

Vue3实战笔记(61)—Vue 3 Watch进化论:解锁实时数据监听新境界

文章目录 前言基本使用总结 前言 Vue 3 中的 watch 功能相比Vue 2有了改进和扩展,旨在提供更灵活的数据监听方式。 基本使用 Vue 3中的watch可以用于Composition API和Options API,但Composition API的使用更为常见。它主要用于监听响应式数据的变化&a…

树莓派5烧系统和ssh远程实现

1、硬件说明 树莓派5 64G micro SD卡读卡器 2、烧录系统过程记录 之前写过一篇pi4B烧录Ubuntu22.04的博客,这篇就简单记录备份下 2.1 去ubuntu官网在树莓派上安装Ubuntu | Ubuntu下载Ubuntu 桌面 24.04 LTS 我之前已经下好了就有个(1) 2.2 用读卡器把SD卡插到…

富格林:采用安全出金操作方法

富格林指出,现货黄金投资是近几年来热门的投资产品,剧烈的行情波动会给投资者带来充分的盈利机会,让不少投资者都开始投身于黄金市场。不过对于新手而言,要想实现安全盈利出金并没有那么容易,需要把握一些正规的交易技…

实战:一款唯美的个人主页-home2.0-2024.6.4(测试成功)

目录 文章目录 目录实验软件前提条件效果说明1、背景2、配置1、克隆代码库2、配置并构建镜像3、部署测试方案1:从docker容器拷贝生成的静态文件放到网站/目录方案2:启动容器,nginx里配置反向代理(推荐) 4、访问 3、总结…

“物联网安全:万物互联背景下的隐私保护与数据安全策略“

在物联网(IoT)时代,随着智能设备的普及和万物互联的加速,隐私保护与数据安全成为了亟待解决的关键问题。以下是一些重要的隐私保护与数据安全策略,以确保在万物互联背景下信息的安全: 1. 加强设备安全&…

.NET Core 应用程序发布指南

引言 .NET Core 是一个开源、跨平台的框架,用于构建现代化的、高性能的应用程序。本文将介绍如何将一个 .NET Core 应用程序发布到不同的环境中,包括本地、云端和容器化部署。 准备工作 在开始之前,请确保您的开发环境已经安装了以下工具&…

MySQL数据库开发设计规范总结

MySQL数据库开发设计规范总结 概述MySQL数据库设计规范设计规范-库设计规范-表、列设计规范-索引跟索引相关的SQL优化设计规范-视图设计规范-存储过程设计规范-触发器设计规范-安全规范 数据库架构设计原则一、高可用架构选择二、扩展性三、安全性策略四、数据完整性策略五、规…

全球首款AR电脑上线,可投影100英寸屏幕

近日,Sightful公司推出了一款名为Spacetop G1的革命性笔记本电脑,将AR技术与传统笔记本电脑巧妙融合,打造出令人惊叹的全新办公体验。 全球首款AR电脑上线,可投影100英寸屏幕 不同于传统笔记本电脑依赖物理屏幕显示内容&#xff0…

异常概述

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在程序运行过程中,经常会遇到各种各样的错误,这些错误统称为“异常”。这些异常有的是由于开发者将关键字敲错导致的&#xf…

重学java 63.IO流 字节流 ④ 文件复制

身处泥泞,看满山花开 —— 24.6.4 图片复制 分析 1.创建两个对象 FilelnputStream —>读取指定的文件 FileOutputStream —> 将读到的字节写到指定的位置 2.边读边写 import java.io.FileInputStream; import java.io.FileOutputStream;public class Demo…

2024年湖北省中级职称代申报不通过扣除手续费套路满满

2024年湖北省中级职称代申报不通过扣除手续费套路满满 建筑类中级职称,市场需求大。建筑企业、人才、工程项目招投标等等都需要一定数量的中级职称。建筑类中级职称申报一年1-2批次。湖北省不同地级市安排不同。湖北建筑类中级职称申报方式 1.公司内部组织申报&…