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

Question

Here is my situation. I am trying to auth the user on the load and need to run the authentication in the pages/_app.js file. Here is the error 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> . Is there a way to run the auth in a wrapped <Provider> . Here is the link to codesandbox

file pages/_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

A simple solution to this problem could be creating an empty component that runs the auth for you in a 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;