位置: IT常识 - 正文

Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)(redux reducer使用教程)

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

推荐整理分享Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)(redux reducer使用教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:redux 教程,redux-toolkit,redux 教程,redux 教程,redux-tookit,redux tool,redux-toolkit,redux tool,内容如对您有帮助,希望把文章链接给更多的朋友!

在之前的开发中,我们通过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: 执行过程中有错误或者抛出了异常;

Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)(redux reducer使用教程)

我们可以在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"// 创建一个异步的actionexport 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"// 创建一个异步的actionexport 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.actionsexport default homeSlice.reducer

不管是哪种方式, 都需要在页面的componentDidMount生命周期中, 通过派发异步的action发送网络请求

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})// 派发异步的actionconst mapDispatchToProps = (dispatch) => ({ fetchHomeMultidata() { dispatch(fetchHomeMultidataAction()) }})export default connect(mapStateToProps, mapDispatchToProps)(About)
本文链接地址:https://www.jiuchutong.com/zhishi/296202.html 转载请保留说明!

上一篇:【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现(微信小程序怎么制作自己的小程序)

下一篇:html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript(html5旅游网页设计)

  • 财务软件属于哪种软件
  • 中国注册税务师协会官网
  • 普票需要填写全部开票信息吗
  • 个体商户多少钱需要报税
  • 项目转包是什么意思
  • 税控技术维护费每年都能抵扣吗
  • 单位没有给员工交社保工伤怎么算
  • 公司现金支付管理办法
  • 无偿使用房屋
  • 工程结算方式分为
  • 投资性房地产处置时为什么要结转其他综合收益
  • 冲以前年度成本会计处理
  • 并购投资的方式有哪些
  • 进口货物要交消费税吗
  • 个人机械租赁怎么纳税
  • 个体户不到3万怎么报税需要花钱吗
  • 成本票最多开多少
  • 有限合伙企业对外转让财产份额
  • 公司注册核税后如何建账?
  • 活动板房增值税税率
  • 单位参加城镇职工基本养老保险缴费基数怎么填写
  • 正确解读《非居民金融账户涉税信息尽职调查管理办法》
  • 湖北个体户网上申报
  • 股东以车辆出资 涉及哪些税费
  • 冲抵货款销售返利会计分录怎么写?
  • 职工食堂对外经营合法吗
  • 附加税有哪些税种
  • 法院判决书能作为证据使用吗
  • 月销售不超过10万免征哪些税
  • 进口报关单保费
  • 研发费加计扣除做账务处理吗
  • 宝塔linux面板怎么安装
  • win7为什么无法开启aero
  • 专用发票的设计流程
  • 所得税汇算清缴后如何调整报表
  • qttask.exe是什么进程?qttask.exe是不是病毒?
  • CLIP模型原理
  • 研发费用如何加计扣除何时申报
  • 施工方可以向建设单位借款么
  • 企业利润分配的通常去向包括
  • 什么是Unicode
  • php返回数据给ajax
  • java web 购物车
  • 云服务器可以一直开着吗
  • 快递怎么做账单
  • phpcms教程
  • 房地产预计毛利率企业所得税
  • 房地产土地使用权计入存货吗
  • 其他应付款的会计编码
  • 上月结转余额怎么做会计分录
  • sql server删除表命令
  • mysql 表不存在报错信息
  • mysql开启远程访问权限
  • 低值易耗品的账务处理图片
  • 初级会计计划成本例题
  • 个体户能开增票吗?
  • 销售返利的账务处理案例
  • 废料卖出算哪种收入
  • 审计年审内容
  • 年末结转的会计核算过程
  • mysql的事务处理
  • windows server2008 64位没有安装音频怎么办?
  • 通过zeno实现加速屏幕显示操作教程
  • win10一直显示正在配置更新
  • mac win10 wifi
  • Centos 6.4 64位版命令行下设置无线网卡教程
  • window10光驱
  • linux mkdir函数创建多级目录
  • win10怎么关掉
  • linux开机流程详解
  • 电脑怎么连接上隐形wi
  • 用css滤镜实现的代码
  • unity的shader在哪儿
  • javascript初级教程
  • android studio 无法解析 aar
  • Python回调函数注册类型不匹配
  • js写一个类
  • js页面滚动到指定位置
  • 百旺税控盘怎么清卡
  • 北京车船税新标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设