React 基礎(chǔ)鞏固(三十六)——RTK中的異步操作

一、RTK中使用異步操作

1. 引入RTK中的createAsyncThunk，在extraReducers中監(jiān)聽執(zhí)行狀態(tài)

   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;
   
   

2. 在界面中引入所需的異步操作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);
   
   

3. 查看運(yùn)行結(jié)果
   文章來源地址http://www.zghlxwxcb.cn/news/detail-616758.html

二、extraReducer的另外一種寫法（鏈?zhǔn)秸{(diào)用）

1. extraReducer還可以傳入一個(gè)函數(shù)，函數(shù)接受一個(gè)builder參數(shù)：

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");
  });
},

2. 查看運(yùn)行結(jié)果，與之前的寫法結(jié)果一致
   

到了這里，關(guān)于【前端知識】React 基礎(chǔ)鞏固(三十六)——RTK中的異步操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！