十一、React-Redux收官

和后端进行交互

一般来讲，当数据发生变化时，不仅仅是前端的状态库要更新数据，服务器端也要对应的对数据进行更新，此时的更新流程如下：

和后端交互示例：学生管理系统

来看下项目中的异步的写法，store.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import {
  getStuListApi,
  deleteStuByIdApi,
  addStuApi,
  editStuByIdApi,
} from "../api/stuApi";

// 异步获取所有的学生数据
export const getStuListAsync = createAsyncThunk(
  "stu/getStuListAsync",
  async (_, thunkApi) => {
    // 发送 ajax 请求
    const response = await getStuListApi();
    // 派发 action，依旧是调用initStuList方法
    thunkApi.dispatch(initStuList(response.data));
  }
);

// 根据 id 异步删除学生数据
export const deleteStuAsync = createAsyncThunk(
  "stu/deleteStuAsync",
  async (payload, thunkApi) => {
    // 和服务器进行通信，删除对应 id 的学生
    deleteStuByIdApi(payload);
    thunkApi.dispatch(deleteStu(payload));
  }
);

// 异步新增学生
export const addStuAsync = createAsyncThunk(
  "stu/addStuAsync",
  async (payload, thunkApi) => {
    const { data } = await addStuApi(payload);
    // 将这个 data 更新到数据仓库
    thunkApi.dispatch(addStu(data));
  }
);

// 异步修改学生
export const editStuAsync = createAsyncThunk(
  "stu/editStuAsync",
  async (payload, thunkApi) => {
    editStuByIdApi(payload.id, payload.stu);
    thunkApi.dispatch(editStu(payload));
  }
);

export const stuSlice = createSlice({
  name: "stu",
  initialState: {
    stuList: [],
  },
  reducers: {
    // 初始化学生列表到仓库的 stuList 里面
    initStuList: (state, { payload }) => {
      state.stuList = payload;
    },
    // 删除学生
    deleteStu: (state, { payload }) => {
      for (let i = 0; i < state.stuList.length; i++) {
        if (state.stuList[i].id === ~~payload) {
          state.stuList.splice(i, 1);
          break;
        }
      }
    },
    // 添加学生
    addStu: (state, { payload }) => {
      state.stuList.push(payload);
    },
    // 编辑学生
    editStu: (state, { payload }) => {
      for (let i = 0; i < state.stuList.length; i++) {
        if (state.stuList[i].id === ~~payload.id) {
          state.stuList.splice(i, 1, payload.stu);
          break;
        }
      }
    },
  },
});

const { initStuList, deleteStu, addStu, editStu } = stuSlice.actions;
export default stuSlice.reducer;

触发异步

useEffect(() => {
   // 之前我们是在该组件直接发送请求获取数据
   // getStuListApi().then(({ data }) => {
   //     setStuList(data);
   // });

   // 现在应该是从仓库获取数据
   if (!stuList.length) {
     // 如果没有数据，应该发送请求获取数据
     // 但是也不是在这里直接发请求，而是应该派发一个 action 到仓库
     // 仓库里面负责发送异步请求获取数据，然后将获取到的数据填充到前端仓库
     dispatch(getStuListAsync());
   }
 }, [stuList, dispatch]);

当然个人理解！！！！！！！！！！如果不需要调用接口，肯定也是可以直接导入action然后直接用dispatch派发，不需要使用导入的异步获取函数