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> 。有没有办法在包装的 <Provider> 中运行身份验证。这是代码和框的link

文件页/_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;

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

1 个答案: