• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端知识React 基础巩固(三十六)——RTK的异步操作

武飞扬头像
前端Outman
帮助1

React 基础巩固(三十六)——RTK中的异步操作

一、RTK中使用异步操作

  1. 引入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;
    
    
  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. 查看运行结果
    学新通

二、extraReducer的另外一种写法(链式调用)

  1. 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");
  });
},
  1. 查看运行结果,与之前的写法结果一致
    学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgbejai
系列文章
更多 icon
同类精品
更多 icon
继续加载