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

心已赠人 2023-10-02 20:59 15阅读 0赞

#### 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发送网络请求

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)