Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)

这篇具有很好参考价值的文章主要介绍了Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Redux Toolkit异步操作

在之前的开发中,我们通过redux-thunk中间件让dispatch中可以进行异步操作, 其实Redux Toolkit工具包默认已经给我们集成了Thunk相关的功能, 我们可以通过createAsyncThunk函数创建一个异步的action

createAsyncThunk函数有参数:

参数一: 传入事件类型type

参数二: 传入一个函数, 该函数可以执行异步操作, 甚至可以直接传入一个异步函数

export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata", async () => {
  const res = await axios.get("http://123.207.32.32:8000/home/multidata")
  const banners = res.data.data.banners.list
  const recommends = res.data.data.recommends.list
})f

当createAsyncThunk创建出来的action被dispatch时,会存在三种状态:

pending: action被发出,但是还没有最终的结果;

fulfilled: 获取到最终的结果(有返回值的结果);

rejected: 执行过程中有错误或者抛出了异常;

我们可以在createSlice的entraReducer中监听这些结果:

注意: 我们创建的一部action: fetchHomeMultidataAction返回的结果, 会被传到下面监听函数的actions参数中,

通过actions.payload获取(也可以对actions进行结构, 直接获取payload)

// extraReducers中针对异步action, 监听它的状态
extraReducers: {
  // 处于padding状态时回调
  [fetchHomeMultidataAction.pending](state, actions) {
    console.log("正处于pending状态")
  },
  // 处于fulfilled状态时回调
  [fetchHomeMultidataAction.fulfilled](state, actions) {
    console.log("正处于fulfilled状态")
  },
  // 处于rejected状态时回调
  [fetchHomeMultidataAction.rejected](state, actions) {
    console.log("正处于rejected状态")
  }
}

演示网络请求的流程:

方式一:

在home.js中, 通过createAsyncThunk函数创建一个异步的action

再在extraReducers中监听这个异步的action的状态, 当他处于fulfilled状态时, 获取到网络请求的数据, 并修改原来state中的数据

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"

// 创建一个异步的action
export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata", async () => {
  const res = await axios.get("http://123.207.32.32:8000/home/multidata")
  // 返回结果会传递到监听函数的actions中
  return res.data
})

const homeSlice = createSlice({
  name: "home",
  initialState: {
    banners: [],
    recommends: []
  },
  // extraReducers中针对异步action, 监听它的状态
  extraReducers: {
    [fetchHomeMultidataAction.fulfilled](state, { payload }) {
      // 在fulfilled状态下, 将state中的banners和recommends修改为网络请求后的数据
      state.banners = payload.data.banner.list
      state.recommends = payload.data.recommend.list
    }
  }
})

export default homeSlice.reducer

方式二:

如果我们不想通过在extraReducers在监听状态, 再修改state这种方法的话, 还有另外的一种做法

我们创建的fetchHomeMultidataAction这个异步action是接受两个参数的

  • 参数一, extraInfo: 在派发这个异步action时, 如果有传递参数, 会放在extraInfo里面
  • 参数二, store: 第二个参数将store传递过来

这样我们获取到结果后, 通过dispatch修改store中的state, 无需再监听异步action的状态

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"

// 创建一个异步的action
export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata", 
  // 有传递过来两个个参数, 从store里面解构拿到dispatch
  async (extraInfo, { dispatch }) => {
    // 1.发送网络请求获取数据
    const res = await axios.get("http://123.207.32.32:8000/home/multidata")
    // 2.从网络请求结果中取出数据
    const banners = res.data.data.banner.list
    const recommends = res.data.data.recommend.list
		// 3.执行dispatch, 派发action
    dispatch(changeBanners(banners))
    dispatch(changeRecommends(recommends))
  }
)

const homeSlice = createSlice({
  name: "home",
  initialState: {
    banners: [],
    recommends: []
  },
  reducers: {
    changeBanners(state, { payload }) {
      state.banners = payload
    },
    changeRecommends(state, { payload }) {
      state.recommends = payload
    }
  }
})

export const { changeBanners, changeRecommends } = homeSlice.actions

export default homeSlice.reducer

不管是哪种方式, 都需要在页面的componentDidMount生命周期中, 通过派发异步的action发送网络请求文章来源地址https://www.toymoban.com/news/detail-791076.html

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchHomeMultidataAction } from '../store/features/home'

export class About extends PureComponent {
  // 生命周期中, 调用映射的方法派发异步的action
  componentDidMount() {
    this.props.fetchHomeMultidata()
  }

  render() {
    const { banners, recommends } = this.props

    return (
      <div>
        <h2>About</h2>
        <h2>轮播图数据</h2>
        <ul>
          {
            banners.map(item => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
        <h2>推荐数据</h2>
        <ul>
          {
            recommends.map(item => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  banners: state.home.banners,
  recommends: state.home.recommends
})
// 派发异步的action
const mapDispatchToProps = (dispatch) => ({
  fetchHomeMultidata() {
    dispatch(fetchHomeMultidataAction())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(About)

到了这里,关于Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • GIS工具包

    GIS工具包,根据jts工具,结合实际使用场景提取出来的常用工具集合;涵盖几何格式转换(WKT,GeoJSON等)与geometry转换、gis距离计算、度距离单位换算、角度计算、buffer运算、映射截取、几何穿串等操作 gis-tools源码库地址 1.1 WktTool使用说明 wkt格式与geometry互转; wkt转geometry操作

    2024年02月06日
    浏览(94)
  • 学习笔记-JVM-工具包(JVM分析工具)

    常用工具 JDK工具 ① jps: JVM Process status tool:JVM进程状态工具,查看进程基本信息 ② jstat: JVM statistics monitoring tool : JVM统计监控工具,查看堆,GC详细信息 ③ jinfo:Java Configuration Info :查看配置参数信息,支持部分参数运行时修改 ④ jmap:Java Memory Map :分析堆内存工具,du

    2024年02月13日
    浏览(74)
  • MATLAB添加工具包(详细)

    我这里要添加的文件包为:DeepLearnToolbox-master 我这里的安装目录是:D:softwareMATLABtoolbox (1)以中文版为例,在主界面找到“设置路径”按钮 (2)点击“设置路径”,弹出设置界面 第一步:点“添加文件夹” (注:如果要工具包中有多个子文件夹,则点“添加并包含子文

    2024年02月02日
    浏览(84)
  • 【Linux】基本开发工具包使用

    目录 一, yum ——linux软件包管理器  1. 软件包是啥子?  2.  yum基本使用  1. 步骤:  2. 开发工具推荐(centos 7.6) 二,vim —— linux文本编辑器 1. Normal mode  ——  命令模式(记不住没关系,多练就行) 2.  last line  mode——   末行模式 (如何进入;shift :) 3. Insert mode ——插

    2024年02月08日
    浏览(84)
  • Hardhat工具包1--安装使用

    参考资料: 官方文档 : https://hardhat.org/getting-started/ https://hardhat.org/hardhat-runner/docs/getting-started#overview 基于Hardhat和Openzeppelin开发可升级合约(一) 基于Hardhat和Openzeppelin开发可升级合约(一)_灬倪先森_的博客-CSDN博客 ---------------------------------------------------------------------------------

    2023年04月11日
    浏览(128)
  • Quanto: PyTorch 量化工具包

    量化技术通过用低精度数据类型 (如 8 位整型 (int8)) 来表示深度学习模型的权重和激活,以减少传统深度学习模型使用 32 位浮点 (float32) 表示权重和激活所带来的计算和内存开销。 减少位宽意味着模型的内存占用更低,这对在消费设备上部署大语言模型至关重要。量化技术也

    2024年04月10日
    浏览(91)
  • Windows11渗透工具包分享

              项目地址 下载地址

    2024年02月13日
    浏览(75)
  • 浅谈WPF之MVVM工具包

    在之前的WPF示例中,都会用到一个MVVM框,也是一个比较常的MVVM框架,就是MVVM工具包【CommunityToolkit.Mvvm】,今天专门以一个简单的小例子,简述一下MVVM工具包的常见用法,仅供学习分享使用,如有不足之处,还请指正。     CommunityToolkit.Mvvm 包(又名 MVVM 工具包)是一个现代

    2024年03月25日
    浏览(86)
  • Kubernetes GoRoutineMap工具包代码详解

    GoRoutineMap 定义了一种类型,可以运行具有名称的 goroutine 并跟踪它们的状态。它防止创建具有相同名称的多个goroutine,并且在上一个具有该名称的 goroutine 完成后的一段退避时间内可能阻止重新创建 goroutine。 使用GoRoutineMap场景: 使用协程的方式运行函数逻辑,如果函数成功

    2024年02月06日
    浏览(71)
  • 宣布推出 .NET 社区工具包 8.1!

    我们很高兴地宣布 .NET Community Toolkit 8.1 版正式发布!这个新版本包括呼声很高的新功能、bug 修复和对 MVVM 工具包源代码生成器的大量性能改进,使开发人员在使用它们时的用户体验比以往更好!  就像在我们之前的版本中一样,我们非常感谢 Microsoft 使用该工具包的团队以及

    2024年02月04日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包