【前端知识】React 基础巩固(三十六)——RTK中的异步操作

React 基础巩固(三十六)——RTK中的异步操作

一、RTK中使用异步操作

  1. 引入RTK中的createAsyncThunk,在extraReducers中监听执行状态

    import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
    import axios from "axios";export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata",async () => {const res = await axios.get("http://123.207.32.32:8000/home/multidata");return res.data;}
    );const homeSlice = createSlice({name: "home",initialState: {banners: [],recommends: [],},reducers: {changeBanners(state, { payload }) {state.banners = payload;},changeRecommends(state, { payload }) {state.recommends = payload;},},extraReducers: {[fetchHomeMultidataAction.pending](state, action) {console.log("fetchHomeMultidataAction pending");},[fetchHomeMultidataAction.fulfilled](state, { payload }) {console.log("fetchHomeMultidataAction fulfilled");state.banners = payload.data.banner.list;state.recommends = payload.data.recommend.list;},[fetchHomeMultidataAction.rejected](state, action) {console.log("fetchHomeMultidataAction rejected");},},
    });export const { changeBanners, changeRecommends } = homeSlice.actions;
    export default homeSlice.reducer;
  2. 在界面中引入所需的异步操作Action

    import React, { PureComponent } from "react";
    import { connect } from "react-redux";
    import { addNumber } from "../store/features/counter";
    import { fetchHomeMultidataAction } from "../store/features/home";export class Home extends PureComponent {componentDidMount() {this.props.fetchHomeMultidata()}addNumber(num) {this.props.addNumber(num);}render() {const { counter } = this.props;return (<div>home:{counter}<button onClick={(e) => this.addNumber(5)}>+5</button>
    <button onClick={(e) => this.addNumber(8)}>+8</button>
    <button onClick={(e) => this.addNumber(18)}>+18</button>
    </div>
    );
    }
    }const mapStateToProps = (state) => ({counter: state.counter.counter,
    });const mapDispatchToProps = (dispatch) => ({addNumber(num) {dispatch(addNumber(num));},fetchHomeMultidata(){dispatch(fetchHomeMultidataAction())}
    });export default connect(mapStateToProps, mapDispatchToProps)(Home);
  3. 查看运行结果
    在这里插入图片描述

二、extraReducer的另外一种写法(链式调用)

  1. extraReducer还可以传入一个函数,函数接受一个builder参数:
extraReducers: (builder) => {builder.addCase(fetchHomeMultidataAction.pending, (state, action) => {console.log("fetchHomeMultidataAction pending");}).addCase(fetchHomeMultidataAction.fulfilled, (state, { payload }) => {console.log("fetchHomeMultidataAction fulfilled");state.banners = payload.data.banner.list;state.recommends = payload.data.recommend.list;}).addCase(fetchHomeMultidataAction.rejected, (state, action) => {console.log("fetchHomeMultidataAction rejected");});
},
  1. 查看运行结果,与之前的写法结果一致
    在这里插入图片描述

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

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

相关文章

代理模式——对象的间接访问

1、简介 1.1、概述 由于某些原因&#xff0c;客户端不想或不能直接访问某个对象&#xff0c;此时可以通过一个被称为“代理”的第三者来实现间接访问&#xff0c;该方案对应的设计模式被称为代理模式。 代理模式是一种应用很广泛的结构型设计模式&#xff0c;而且变化很多。…

Elasticsearch 全文检索 分词检索-Elasticsearch文章四

文章目录 官方文档地址refercence文档全文搜索体系match简单查询match 多词/分词单字段分词match多个词的逻辑控制match的匹配精度match_pharse_prefix分词前缀方式match_bool_prefixmulti_match多字段匹配 query string类型Interval类型DSL查询之Term详解聚合查询之Bucket聚合…

图论-简明导读

计算机图论是计算机科学中的一个重要分支&#xff0c;它主要研究图的性质和结构&#xff0c;以及如何在计算机上有效地存储、处理和操作这些图。本文将总结计算机图论的核心知识点。 一、基本概念 计算机图论中的基本概念包括图、节点、边等。图是由节点和边构成的数据结构&am…

P3373 【模板】线段树 2

题目 思路 作为线段树模板题&#xff0c;这题主要考查了对lazytag以及先乘后加的使用&#xff0c; 线段树详解 因为是模板&#xff0c;所以这里证明略 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn1e55; int n,m,p; int a[…

汽车后视镜反射率测定仪

汽车后视镜位于汽车头部的左右两侧&#xff0c;顶部以及汽车内部的前方。汽车后视镜反映汽车正后方视野、两侧视野和汽车前端区域视野&#xff0c;以便驾驶员可以间接看清楚这些位置的情况&#xff0c;它起着“第二只眼睛”的作用&#xff0c;扩大了驾驶者的视野范围&#xff0…

华为数通HCIA-ARP(地址解析协议)详细解析

地址解析协议 (ARP) ARP &#xff08;Address Resolution Protocol&#xff09;地址解析协议&#xff1a; 根据已知的IP地址解析获得其对应的MAC地址。 ARP&#xff08;Address Resolution Protocol&#xff0c;地址解析协议&#xff09;是根据IP地址获取数据链路层地址的一个…

【Ubuntu 18.04 搭建 DHCP 服务】

参考Ubuntu官方文档&#xff1a;https://ubuntu.com/server/docs/how-to-install-and-configure-isc-dhcp-server dhcpd.conf 手册页 配置&#xff1a;https://maas.io/docs/about-dhcp 实验环境规划 Ubuntu 18.04&#xff08;172.16.65.128/24&#xff09;dhcp服务端Ubuntu…

微信小程序使用editor富文本编辑器 以及回显 全屏弹窗的模式

<!--富文本接收的位置--><view class"white-box"><view class"title"><view class"yellow-fence"></view><view class"v1">教研记录</view></view><view class"add-btn"…

从零开始学python(十二)如何成为一名优秀的爬虫工程师

前言 回顾之前讲述了python语法编程 必修入门基础和网络编程&#xff0c;多线程/多进程/协程等方面的内容&#xff0c;后续讲到了数据库编程篇MySQL&#xff0c;Redis&#xff0c;MongoDB篇&#xff0c;和机器学习&#xff0c;全栈开发&#xff0c;数据分析前面没看的也不用往…

SonarQube入门 - 搭建本地环境

一、SonarQube是什么&#xff1f; SonarQube是一种自我管理的自动代码审查工具&#xff0c;可以系统地帮助您交付干净的代码。作为我们Sonar 解决方案的核心元素 &#xff0c;SonarQube 集成到您现有的工作流程中并检测代码中的问题&#xff0c;以帮助您对项目执行持续的代码检…

Meta-Transformer 多模态学习的统一框架

Meta-Transformer是一个用于多模态学习的新框架&#xff0c;用来处理和关联来自多种模态的信息&#xff0c;如自然语言、图像、点云、音频、视频、时间序列和表格数据&#xff0c;虽然各种数据之间存在固有的差距&#xff0c;但是Meta-Transformer利用冻结编码器从共享标记空间…

Linux lvs负载均衡

LVS 介绍&#xff1a; Linux Virtual Server&#xff08;LVS&#xff09;是一个基于Linux内核的开源软件项目&#xff0c;用于构建高性能、高可用性的服务器群集。LVS通过将客户端请求分发到一组后端服务器上的不同节点来实现负载均衡&#xff0c;从而提高系统的可扩展性和可…

01-1 搭建 pytorch 虚拟环境

pytorch 管网&#xff1a;PyTorch 一 进入 Anaconda 二 创建虚拟环境 conda create -n pytorch python3.9注意要注意断 VPN切换镜像&#xff1a; 移除原来的镜像 # 查看当前配置 conda config --show channels conda config --show-sources# 移除之前的镜像 conda config --…

量化:numpy基础

文章目录 ndarray创建array创建顺序数组改变数据类型nan筛选元素去重重塑 ndarray numpy最重要的一个特点是其N维数组对象ndarry&#xff0c;它是一系列同类型数据的集合 创建array ndarry的创建方式如下&#xff1a; numpy.array(object, dtype None, copy True, order …

c语言——计算两个正整数的最大公倍数

//计算两个正整数的最大公倍数 //例如40和60的最大公约数为20. //计算两个正整数的最大公倍数 //例如40和60的最大公约数为20. #include<stdio.h> int main() {int a,b,temp,i;printf("Input a & b:");scanf("%d%d",&a,&b);if(a<b){…

Go -- 测试 and 项目实战

没有后端基础&#xff0c;学起来真是费劲&#xff0c;所以打算速刷一下&#xff0c;代码跟着敲一遍&#xff0c;有个印象&#xff0c;大项目肯定也做不了了&#xff0c;先把该学的学了&#xff0c;有空就跟点单体项目&#xff0c;还有该看的书.... 目录 &#x1f34c;单元测试…

从Spring的角度看Memcached和Redis及操作

目录 Memcached和Redis的区别 适用场景 Memcached配置使用 Redis配置使用 在SpringBoot的框架里&#xff0c;有直连Redis的SDK却没有Memcached的&#xff0c;可见相比地位。不过各有各的适应场景&#xff0c;Redis这个单线程模型确实非常强。 Memcached和Redis的区别 共同…

redis的数据类型及操作

三、redis的数据类型 String字符串 set、get mset setex setnx 会检测键值对存不存在&#xff0c;如果存在不发生变化&#xff0c;如果存在则增加键值对 只增加 而set会覆盖原来的值 增加、修改 setrange 有下标则替换&#xff0c;没有则添加 getrange 获取全…

剑指 Offer 54. ! 二叉搜索树的第k大节点 (考察二叉树的中序遍历)

剑指 Offer 54. 二叉搜索树的第k大节点 给定一棵二叉搜索树&#xff0c;请找出其中第 k 大的节点的值。 我的思路是&#xff1a;用一个全局arrayList不断收集“逆向”中序遍历该搜索二叉树所需要的答案 class Solution {int res, k;public int kthLargest(TreeNode root, int …

为Stable Diffusion web UI开发自己的插件实战

最近&#xff0c;Stable Diffusion AI绘画受到了广泛的关注和热捧。它的Web UI提供了了一系列强大的功能&#xff0c;其中特别值得一提的是对插件的支持&#xff0c;尤其是Controlnet插件的加持&#xff0c;让它的受欢迎程度不断攀升。那么&#xff0c;如果你有出色的创意&…