我正在制作 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吗?感谢您阅读我的问题:)
我做了很多上下文。
您可以使用
useReducer
和 Context API
将它们共享到组件树。
关于您的问题的良好实践是为每个逻辑单元/目的创建多个减速器,并且由于这种方法,您将遵循单一职责模式,并且维护这些减速器将更容易。
然后,您可以将您的减速器组合成一个集中的事实来源,并在上下文中使用此
rootReducer
以使子级可以访问状态和调度。
这是示例。