如何高效使用React Context API

Question

我正在制作 React Web 应用程序，并且是初学者。当我使用 Context API 时，我遇到了问题。

这是我的代码。

import React, { createContext, useState, useEffect } from "react";

export const RoleContext = createContext({
  optionRole: "",
  setOptionRole: () => {},
  accessToken: "",
  setAccessToken: () => {},
  passwordChecked: false,
  setPasswordChecked: () => {},
});

export const RoleProvider = ({ children }) => {
  const [optionRole, setOptionRole] = useState(() => {
    return localStorage.getItem("optionRole") || "";
  });
  const [accessToken, setAccessToken] = useState("");
  const [passwordChecked, setPasswordChecked] = useState(false);

  useEffect(() => {
    
    const refreshAccessToken = async () => {
      try {
        const response = await fetch("/auth/token", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${accessToken}`,
          },
        });

        if (!response.ok) {
          throw new Error("Failed to refresh access token");
        }

        const data = await response.json();
        setAccessToken(data.accessToken);
      } catch (error) {
        
        console.error("Failed to refresh access token:", error);
        
        // logout();
      }
    };

        if (!accessToken) {
      refreshAccessToken();
    }
  }, [accessToken]);

  useEffect(() => {
        localStorage.setItem("optionRole", optionRole);
  }, [optionRole]); 

  const roleCtx = {
    optionRole,
    setOptionRole,
    accessToken,
    setAccessToken,
    passwordChecked,
    setPasswordChecked,
  };

  return (
    <RoleContext.Provider value={roleCtx}>{children}</RoleContext.Provider>
  );
};

上下文名称是RoleContext。这意味着该组件将处理角色。但我想要另一个 Context API。如果我再做一个 Context API。代码会很乱。例如，我想制作MathContext。我可以这样用。假设我想要 Context API 越多，我想做的越多，代码就越复杂。

<SubjectProvider>
 <MathProvider>
  <RoleProvider>
   <App/>
  </RoleProvider>
 <MathProvider>
</SubjectProvider>

有什么好的方法使用Context API吗？感谢您阅读我的问题:)

我做了很多上下文。

Answer 1

您可以使用

useReducer

和

Context API

将它们共享到组件树。

---

关于您的问题的良好实践是为每个逻辑单元/目的创建多个减速器，并且由于这种方法，您将遵循单一职责模式，并且维护这些减速器将更容易。

然后，您可以将您的减速器组合成一个集中的事实来源，并在上下文中使用此

rootReducer

以使子级可以访问状态和调度。
在这种情况下，您将只有 1 个上下文提供程序，但它可能包含多个减速器，并且每个减速器将负责其自己的目的，因此您将在没有许多上下文提供程序的情况下获得功能。

---

这是示例。

沙箱示例