redux的异步reduxjs-toolkit如何进行操作

既然您能学到这里一些基本搭建就不多说了，直奔主题！

安装reduxjs/toolkit: npm install @reduxjs/toolkit

在进行异步操作时，需要我们引入:createAsyncThunk

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

export const MovesData=createAsyncThunk(//MovesData这个命名我们之后会用到

    "MovesAV",//第一个参数是命名空间，我是随机起的

    async()=>{//我的异步请求方法

        const { data }= await axios.get("http://localhost:8000/")

        console.log(data,"createAsyncThunk获取数据")

        return data

    }

)

当然不会如此简单了，还需要我们引入extraReducers：{}这是与reducers同级的，一些state操作也是在这个里面进行

  extraReducers:{

        [MovesData.fulfilled.type]:(state,{payload})=>{//fulfilled.type一共有三个状态开始，失败和成功我们可以打印查看state状态，payload是接收的数据

            console.log(state,"extraReducers的state",payload)

            state.list=payload//直接操作initialState中的state

        }

    }

当然这样我们是无法直接执行的，需要我们在组件中调用

App.js 如何调用

import {useSelector,useDispatch} from "react-redux"//还是需要我饿们的useDispatch得

import {MovesData} from "../../store/model/cart" //这是我的路径

const Dispactch =useDispatch()

Dispactch(MovesData())