我将如何组织由 Axios 请求组成的 React 代码？

Question

我有一个 useApplicationData 文件，其中包含我在项目中发出的所有 axios 请求。我列出了它们，并更新了与其对应的每一个的状态。我想知道组织以下代码的更好方法是什么：

import { useState, useEffect } from "react";
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:3001';

const useApplicationData = () => {
  const [users, setUsers] = useState([]);
  const [budgets, setBudgets] = useState([]);
  const [budgetsOfCategory, setBudgetOfCategory] = useState([]);
  const [categories, setCategories] = useState([]);
  const [expenses, setExpenses] = useState([]);
  const [expensesOfCategory, setExpensesOfCategory] = useState([]);
  const [finances, setFinances] = useState([]);
  const [change, setChange] = useState([false]);

  

  const getUsers = async () => {
    try {
      const result = await axios({
        url: "/users/",
        method: "GET",
      });
      setUsers(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const registerUser = async (first_name, last_name, email, password) => {
    try {
      const result = await axios({
        url: "/users/register",
        method: "POST",
        data: {
          first_name,
          last_name,
          email,
          password,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const loginUser = async (email, password) => {
    try {
      const result = await axios({
        url: "/users/login",
        method: "POST",
        data: {
          email,
          password,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const logoutUser = async () => {
    try {
      const result = await axios({
        url: "/users/logout",
        method: "POST",
      });
      setBudgets([]);
      setCategories([]);
      setExpenses([]);
      setFinances([]);
      setBudgetOfCategory([]);
      setExpensesOfCategory([]);
    } catch (err) {
      console.log(err);
    }
  };

  const getBudgets = async () => {
    try {
      const result = await axios({
        url: "/attain/budget",
        method: "GET",
      });

      setBudgets(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getBudgetOfCategory = async (category_id) => {
    try {
      const result = await axios({
        url: "/attain/budget/category",
        method: "GET",
        data: category_id,
      });

      setBudgetOfCategory(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getCategories = async () => {
    try {
      const result = await axios({
        url: "/attain/categories",
        method: "GET",
      });

      setCategories(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getExpenses = async () => {
    try {
      const result = await axios({
        url: "/attain/expenses",
        method: "GET",
      });

      setExpenses(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getExpensesOfCategory = async (category_id) => {
    try {
      const result = await axios({
        url: "/attain/expenses/category",
        method: "GET",
        data: category_id,
      });

      setExpensesOfCategory(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getFinances = async () => {
    try {
      const result = await axios({
        url: "/attain/finances",
        method: "GET",
      });

      setFinances(result.data.data);
    } catch (err) {
      console.log(err);
    }
  };

  const addBudget = async (
    category_id,
    allocated_amount,
    total_amount,
    duration
  ) => {
    try {
      const result = await axios({
        url: "/insert/budget",
        method: "POST",
        data: {
          category_id,
          allocated_amount,
          total_amount,
          duration,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const addCategory = async (category) => {
    try {
      const result = await axios({
        url: "/insert/category",
        method: "POST",
        data: category,
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const addFinance = async (source, amount, duration, fixed) => {
    try {
      const result = await axios({
        url: "/insert/finance",
        method: "POST",
        data: {
          source,
          amount,
          duration,
          fixed,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const addExpense = async (category_id, amount) => {
    try {
      const result = await axios({
        url: "/insert/expense",
        method: "POST",
        data: {
          category_id,
          amount,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const updateBudget = async (
    category_id,
    allocated_amount,
    total_amount,
    duration,
    id
  ) => {
    try {
      const result = await axios({
        url: "/update/budget",
        method: "PUT",
        data: {
          category_id,
          allocated_amount,
          total_amount,
          duration,
          id,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const updateCategory = async (category, id) => {
    try {
      const result = await axios({
        url: "/update/category",
        method: "PUT",
        data: {
          category,
          id,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const updateFinance = async (source, amount, duration, fixed, id) => {
    try {
      const result = await axios({
        url: "/update/finance",
        method: "PUT",
        data: {
          source,
          amount,
          duration,
          fixed,
          id,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const updateExpense = async (category_id, amount, id) => {
    try {
      const result = await axios({
        url: "/update/category",
        method: "PUT",
        data: {
          category_id,
          amount,
          id,
        },
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const deleteBudget = async (id) => {
    try {
      const result = await axios({
        url: "/update/budget",
        method: "DELETE",
        data: id,
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const deleteCategory = async (id) => {
    try {
      const result = await axios({
        url: "/update/category",
        method: "DELETE",
        data: id,
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const deleteFinance = async (id) => {
    try {
      const result = await axios({
        url: "/update/finance",
        method: "DELETE",
        data: id,
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  const deleteExpense = async (id) => {
    try {
      const result = await axios({
        url: "/update/expense",
        method: "DELETE",
        data: id,
      });
    } catch (err) {
      console.log(err);
    }
    setChange(!change);
  };

  useEffect(() => {
    getUsers();
    getBudgets();
    getCategories();
    getExpenses();
    getFinances();
  }, []);

  useEffect(() => {
    getUsers();
    getBudgets();
    getCategories();
    getExpenses();
    getFinances();
  }, [change]);

  return {
    users,
    registerUser,
    loginUser,
    logoutUser,
    budgets,
    budgetsOfCategory,
    categories,
    expenses,
    expensesOfCategory,
    finances,
    getBudgetOfCategory,
    getExpensesOfCategory,
    addBudget,
    addCategory,
    addFinance,
    addExpense,
    updateBudget,
    updateCategory,
    updateFinance,
    updateExpense,
    deleteBudget,
    deleteCategory,
    deleteFinance,
    deleteExpense,
  };
};

export default useApplicationData;

我正在考虑使用 Redux 方法，部分是为了学习如何使用它，但我不确定是否会推荐这样做。

Answer 1

我个人会将您的 axios 请求抽象为单独的服务，以便您更好地利用单一职责原则：

UserService.js
BudgetService.js
ExpenseService.js
...

使用这些服务的组件将使用 useEffect 挂钩维护自己的状态：

 React.useEffect(() => {
   userService.getUsers()...