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

• 1
• 2
• 3
• 4
• 5

当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状态") } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

演示网络请求的流程:

方式一:

在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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

方式二:

如果我们不想通过在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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

不管是哪种方式, 都需要在页面的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 }) // 派发异步的action const mapDispatchToProps = (dispatch) => ({ fetchHomeMultidata() { dispatch(fetchHomeMultidataAction()) } }) export default connect(mapStateToProps, mapDispatchToProps)(About)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49