前端知识React 基础巩固(三十六)——RTK的异步操作
React 基础巩固(三十六)——RTK中的异步操作
一、RTK中使用异步操作
-
引入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;
-
在界面中引入所需的异步操作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);
-
查看运行结果
二、extraReducer的另外一种写法(链式调用)
- 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");
});
},
- 查看运行结果,与之前的写法结果一致
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbejai
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01