使用 Next.js 和 Redux 进行身份验证

Question

这是我的情况。 我正在尝试在加载时对用户进行身份验证，并且需要在pages/_app.js文件中运行身份验证。 这是错误useReduxContext.js:24 Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> useReduxContext.js:24 Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>中。 有没有办法在包装的<Provider>中运行身份验证。 这是codesandbox的 链接

文件页面/_app.js

import React, { useEffect } from 'react';
import { Provider, useDispatch } from 'react-redux';

import { auth } from '../lib/firebase.js';
import { getUserLoggedIn } from '../store/user.js';

import configureAppStore from '../store/configureAppStore.js';

import Header from '../components/nav/Header.jsx';

const store = configureAppStore();

function MyApp({ Component, pageProps }) {
  const dispatch = useDispatch();
  // to check firebase auth state
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        const idTokenResult = await user.getIdTokenResult();
        dispatch(
          getUserLoggedIn({
            email: user.email,
            token: idTokenResult.token,
          })
        );
      }
    });

    // cleanup
    return () => unsubscribe();
  }, []);
  return (
    <>
      <Provider store={store}>
        <Header />
        <Component {...pageProps} />
      </Provider>
    </>
  );
}

export default MyApp;

Answer 1

这个问题的一个简单解决方案是创建一个空组件，在 useEffect 中为您运行身份验证。

import React, { useEffect } from 'react';
import { Provider, useDispatch } from 'react-redux';

import { auth } from '../lib/firebase.js';
import { getUserLoggedIn } from '../store/user.js';

import configureAppStore from '../store/configureAppStore.js';

import Header from '../components/nav/Header.jsx';

const store = configureAppStore();

function MyApp({ Component, pageProps }) {
  const AuthComponent = React.memo(() => {
      const dispatch = useDispatch();
      // to check firebase auth state
      useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(async (user) => {
          if (user) {
            const idTokenResult = await user.getIdTokenResult();
            dispatch(
              getUserLoggedIn({
                email: user.email,
                token: idTokenResult.token,
              })
            );
          }
        });

        // cleanup
        return () => unsubscribe();
      }, []);

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

 />
      </Provider>
    </>
  );
}

export default MyApp;