React-使用useReducer处理异步CRUD操作

1. 首先定义 reducer 函数，用来处理状态的更新

const reducer = (state, action) => {
  switch (action.type) {
    case "FETCH_DATA":
      return {...state, loading: true};
    case "FETCH_SUCCESS":
      return {...state, loading: false, data: action.payload};
    case "UPDATE_DATA":
      return {...state, loading: true};
    case "UPDATE_SUCCESS":
      // 更新成功后的状态处理
      return {....}
    case "ADD_DATA":
      // 添加数据时的状态处理
      return {....}
    case "ADD_SUCCESS":
      // 添加成功后的状态处理
      return {....}
    default:
      return state;
  }
};

2. 在组件中使用 useReducer 和 useEffect 处理数据的请求和更新操作

import React, { useEffect, useReducer } from "react";

const initialState = {
  data: [],
  loading: false,
  error: null
};

const YourComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    fetch("your-api-url")
      .then(response => response.json())
      .then(data => {
        dispatch({ type: "FETCH_SUCCESS", payload: data });
      })
      .catch(() => {
        dispatch({ type: "FETCH_FAILURE" });
      });
  }, []);

  const handleUpdate = (id, updatedData) => {
    dispatch({ type: "UPDATE_DATA" });
    fetch(`your-api-url/${id}`, {
      method: "PUT",
      body: JSON.stringify(updatedData)
    })
      .then(response => response.json())
      .then(data => {
        dispatch({ type: "UPDATE_SUCCESS", payload: data });
      })
      .catch(() => {
        dispatch({ type: "UPDATE_FAILURE" });
      });
  };

  const handleAdd = (newData) => {
    dispatch({ type: "ADD_DATA" });
    fetch("your-api-url", {
      method: "POST",
      body: JSON.stringify(newData)
    })
      .then(response => response.json())
      .then(data => {
        dispatch({ type: "ADD_SUCCESS", payload: data });
      })
      .catch(()