Redux vs HOC在React应用程序与认证会话

Question

我有React应用程序在框架Next.js(但框架并不重要)与认证实现。

当前应用程序在第一次加载后通过API调用获得用户会话数据(我使用next-auth)。这导致加载和会话获取之间存在间隔，从而导致用户在整个应用程序中看到加载旋转器的时间间隔很小。

我想通过SSR(服务器端渲染)的实现来缓解这个问题，我可以用会话数据来填充初始响应。

这可以很容易地在Next.js通过getServerProps方法在组件，但问题是，我需要实现这个方法在每一个页面我有。

这就是为什么我正在寻找一种方法，使整个应用程序的会话状态全局，所以每个页面(组件)可以访问这个会话数据。

我的主要问题是，如果我应该使用HOC包装器，我将实现getServerProps来接收会话数据，或者我应该使用Redux存储并以相同的方法填充此存储。

我不确定hoc是否仍然被广泛使用，或者它们现在只是被弃用了。

我不想在Next.js自定义_app.js文件中实现getInitialProps，因为这将禁用静态生成页面的能力，并且会话将在每个页面中可用。我计划应用程序只需要这个会话数据在大约一半的页面。

那么我应该使用HOC还是仅仅实现redux store呢?

Answer 1

您可以这样做:

创建一个身份验证上下文提供程序，它将向您的组件传递身份验证数据。例如:

interface ContextProps {
authenticated: boolean;
handleLogin: () => void;
handleLogout: () => void;
}
const authContext = createContext<Partial<ContextProps>>(undefined);

与上下文一起，创建一个钩子，它将使用useEffect来确定身份验证状态-可以检查cookie是否存在，或者等待调用API来检查身份验证状态。将此设置为相关状态，并在提供程序中使用此值。

interface AuthProviderProps {
children: any;
}
const AuthProvider = (({ children }: AuthProviderProps) => {
const auth = useProvideAuth();
return <authContext.Provider value={auth}>{children}</authContext.Provider>;
});
export const useAuth = () => useContext(authContext);
export default AuthProvider;

在你的_app.js:

...
<AuthProvider>
<Component pageProps={pageProps} />
</AuthProvider>
...

相关页面访问:

const Page = () => {
const { authenticated } = useAuth();
if (!authenticated) {
return (
<>
Not authenticated
</>
);
}
...

然后你可以在你的相关组件中使用