【前端知识】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");
  });
},