redux 如何在每次安装下一个应用时调度操作?

bpsygsoo  于 2023-05-29  发布在  其他
关注(0)|答案(1)|浏览(86)

我正在为我的Next.js应用程序进行身份验证。当用户登录时,我将JWT令牌存储在cookie中。同时,我写了一个API调用,它接受令牌并返回用户信息(电子邮件,电话号码等),因为我想将这些信息存储在redux存储中。
然而,redux存储不会持久化,所以我希望每次我的下一个应用程序安装时,我都可以获取cookie,调用API,然后调度一个操作来将信息存储在redux存储中。但是它不允许我在_app.tsx中使用调度函数。
是否有变通方法或可能有更好的方法来做到这一点?

30byixjq

30byixjq1#

要在Next.js应用挂载时获取用户信息并将其存储在Redux中,您可以遵循不同的方法。一种选择是使用自定义钩子来获取用户信息并更新Redux商店。下面是一个如何实现此目标的示例:

function useFetchUserInformation() {
    const dispatch = useDispatch();
  
    useEffect(() => {
        const fetchUser = async () => {
            try {
                // Call the API to fetch user information
                // NOTE: Replace with your actual API endpoint
                const userInformation = await fetch('/api/user'); 

                // Dispatch the action to store user information in Redux
                dispatch({ type: 'SET_USER_INFORMATION', payload: userInformation });
            } catch (error) {
                console.error('Error fetching user information:', error);
            }
        };

        fetchUser();
    }, [dispatch]);
}

然后在MyApp组件中调用此钩子,以在应用挂载时启动抓取过程,如下所示:

function MyApp({ Component, pageProps }) {
    useFetchUserInformation();

    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    );
}

相关问题