Redux Toolkit異步操作

在之前的開發(fā)中，我們通過redux-thunk中間件讓dispatch中可以進(jìn)行異步操作, 其實Redux Toolkit工具包默認(rèn)已經(jīng)給我們集成了Thunk相關(guān)的功能, 我們可以通過createAsyncThunk函數(shù)創(chuàng)建一個異步的action

createAsyncThunk函數(shù)有參數(shù):

參數(shù)一: 傳入事件類型type

參數(shù)二: 傳入一個函數(shù), 該函數(shù)可以執(zhí)行異步操作, 甚至可以直接傳入一個異步函數(shù)

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

當(dāng)createAsyncThunk創(chuàng)建出來的action被dispatch時，會存在三種狀態(tài):

pending: action被發(fā)出，但是還沒有最終的結(jié)果;

fulfilled: 獲取到最終的結(jié)果(有返回值的結(jié)果);

rejected: 執(zhí)行過程中有錯誤或者拋出了異常;

我們可以在createSlice的entraReducer中監(jiān)聽這些結(jié)果:

注意: 我們創(chuàng)建的一部action: fetchHomeMultidataAction返回的結(jié)果, 會被傳到下面監(jiān)聽函數(shù)的actions參數(shù)中,

通過actions.payload獲取(也可以對actions進(jìn)行結(jié)構(gòu), 直接獲取payload)

// extraReducers中針對異步action, 監(jiān)聽它的狀態(tài)
extraReducers: {
  // 處于padding狀態(tài)時回調(diào)
  [fetchHomeMultidataAction.pending](state, actions) {
    console.log("正處于pending狀態(tài)")
  },
  // 處于fulfilled狀態(tài)時回調(diào)
  [fetchHomeMultidataAction.fulfilled](state, actions) {
    console.log("正處于fulfilled狀態(tài)")
  },
  // 處于rejected狀態(tài)時回調(diào)
  [fetchHomeMultidataAction.rejected](state, actions) {
    console.log("正處于rejected狀態(tài)")
  }
}

演示網(wǎng)絡(luò)請求的流程:

方式一:

在home.js中, 通過createAsyncThunk函數(shù)創(chuàng)建一個異步的action

再在extraReducers中監(jiān)聽這個異步的action的狀態(tài), 當(dāng)他處于fulfilled狀態(tài)時, 獲取到網(wǎng)絡(luò)請求的數(shù)據(jù), 并修改原來state中的數(shù)據(jù)

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

// 創(chuàng)建一個異步的action
export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata", async () => {
  const res = await axios.get("http://123.207.32.32:8000/home/multidata")
  // 返回結(jié)果會傳遞到監(jiān)聽函數(shù)的actions中
  return res.data
})

const homeSlice = createSlice({
  name: "home",
  initialState: {
    banners: [],
    recommends: []
  },
  // extraReducers中針對異步action, 監(jiān)聽它的狀態(tài)
  extraReducers: {
    [fetchHomeMultidataAction.fulfilled](state, { payload }) {
      // 在fulfilled狀態(tài)下, 將state中的banners和recommends修改為網(wǎng)絡(luò)請求后的數(shù)據(jù)
      state.banners = payload.data.banner.list
      state.recommends = payload.data.recommend.list
    }
  }
})

export default homeSlice.reducer

方式二:

如果我們不想通過在extraReducers在監(jiān)聽狀態(tài), 再修改state這種方法的話, 還有另外的一種做法

我們創(chuàng)建的fetchHomeMultidataAction這個異步action是接受兩個參數(shù)的

• 參數(shù)一, extraInfo: 在派發(fā)這個異步action時, 如果有傳遞參數(shù), 會放在extraInfo里面
• 參數(shù)二, store: 第二個參數(shù)將store傳遞過來

這樣我們獲取到結(jié)果后, 通過dispatch修改store中的state, 無需再監(jiān)聽異步action的狀態(tài)

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

// 創(chuàng)建一個異步的action
export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata", 
  // 有傳遞過來兩個個參數(shù), 從store里面解構(gòu)拿到dispatch
  async (extraInfo, { dispatch }) => {
    // 1.發(fā)送網(wǎng)絡(luò)請求獲取數(shù)據(jù)
    const res = await axios.get("http://123.207.32.32:8000/home/multidata")
    // 2.從網(wǎng)絡(luò)請求結(jié)果中取出數(shù)據(jù)
    const banners = res.data.data.banner.list
    const recommends = res.data.data.recommend.list
		// 3.執(zhí)行dispatch, 派發(fā)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生命周期中, 通過派發(fā)異步的action發(fā)送網(wǎng)絡(luò)請求文章來源地址http://www.zghlxwxcb.cn/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 {
  // 生命周期中, 調(diào)用映射的方法派發(fā)異步的action
  componentDidMount() {
    this.props.fetchHomeMultidata()
  }

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

    return (
      <div>
        <h2>About</h2>
        <h2>輪播圖數(shù)據(jù)</h2>
        <ul>
          {
            banners.map(item => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
        <h2>推薦數(shù)據(jù)</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
})
// 派發(fā)異步的action
const mapDispatchToProps = (dispatch) => ({
  fetchHomeMultidata() {
    dispatch(fetchHomeMultidataAction())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(About)

到了這里，關(guān)于Redux工具包(二) - Redux Toolkit的異步操作(發(fā)送網(wǎng)絡(luò)請求)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！