介绍使用@reduxjs/toolkit工具包发送异步请求最简便的方式

 1、安装@reduxjs/toolkit工具包

pnpm i @reduxjs/toolkit react-redux

2、在src文件夹下新建store文件夹

3、在store文件夹下新建index.js文件作为store的入口文件，其次再新建homeReducer.js文件

4、homeReducer.js文件中写入以下代码

// 从 @reduxjs/toolkit 库中导入 createSlice 函数
import {createSlice} from "@reduxjs/toolkit";
// 从 home.js 文件中导入 getFruitsApi 函数
import {getFruitsApi} from "@/api/home.js";

// 创建一个 home reducer 的 slice
const homeSlice = createSlice({
  // 设置 slice 的名称
  name: "home",
  // 设置 slice 的初始状态
  initialState: {
    fruits: [],
    total: 0,
    pageNum: 1,
    pageSize: 10,
    listLoading: false,
  },
  // 设置 slice 的 reducers（用于修改state里面的数据）
  reducers: {
    getFruitList(state, {payload: {pageSum, data}}) {
      state.fruits = data
      state.total = pageSum
    },
    // 用于设置加载状态的reducer
    setLoading(state,{payload}){
      state.listLoading = payload
    }
  },
});
const {getFruitList,setLoading} = homeSlice.actions
//异步请求
// 导出一个异步函数
export const getFruits = () => async (dispatch, getState) => {
  const pageNum =  getState().home.pageNum
  const pageSize = getState().home.pageSize
  try {
    // 设置加载状态为 true
    dispatch(setLoading(true))
    // 调用 getFruitsApi 函数，获取数据列表
    const {pageSum, data} = await getFruitsApi(pageNum, pageSize)
    // 将获取到的数据列表存储到 state 中
    dispatch(getFruitList({pageSum, data}))
  }catch (e){
    // 如果发生错误，设置加载状态为 false
    dispatch(setLoading(false))
    // 返回错误信息
    return e
  }finally {
    // 无论是否发生错误，最后都将加载状态设置为 false
    dispatch(setLoading(false))
  }
}
// 导出 reducer
export default homeSlice.reducer;

5、在store文件夹下面的index文件中配置store并传入reducer，最后向外暴露 

import {configureStore} from "@reduxjs/toolkit";
import homeReducer from "@/store/homeSlice.js";
export default configureStore({
  reducer:{
   home:homeReducer
  }
})

6、在main.js文件中导入store并通过Provide组件将其传入

import { Provider } from "react-redux";
import store from "@/store";

ReactDOM.createRoot(document.getElementById("root")).render(
    <Provider store={store}>
          <App />
    </Provider>
);

7、最后再在组件中直接调用刚刚写好的异步函数就可以直接从服务器获取数据

import {useDispatch} from 'react-redux'
import {useEffect} from 'react'
// 导入getFruits函数
import { getFruits } from "@/store/homeSlice.js";
export default ()=>{
const dispatch = useDispatch()
useEffect(function(){
    dispatch(getFruits())
},[])
}