React Redux提示组件未包裹Provider 实际已包裹仍报错如何解决

你调用useSelector、useDispatch这两个React Redux Hooks的时机不对：这两个Hook只能在被<Provider>包裹的组件树内部运行，你当前是在MyApp组件的顶层直接调用这两个Hook，但<Provider>是写在MyApp的返回内容里的，MyApp本身没有被Provider覆盖，自然找不到Redux上下文就会抛出这个报错。

把身份认证相关的逻辑抽离为独立子组件，MyApp仅负责渲染Provider包裹的结构即可，修复后的代码如下：

import 'tailwindcss/tailwind.css';
import '../styles/global.css';
import Router from 'next/router';
import ProgressBar from "@badrap/bar-of-progress";
import React, { useEffect } from "react";
import { auth } from '../firebase';
import { useDispatch, useSelector, Provider } from "react-redux";
import { store } from '../src/app/store'
import { login, logout, selectUser } from "./userSlice";

// 抽离身份认证逻辑为独立组件，放在Provider内部运行
function AuthProvider({ children }) {
    const user = useSelector(selectUser);
    const dispatch = useDispatch();

    useEffect(() => {
      const unsubscribe = auth.onAuthStateChanged(userAuth => {
        if(userAuth) {
          dispatch(
            login({
            uid: userAuth.uid,
            email: userAuth.email
          })
          );
        } else {
          dispatch(logout);
        }
      });
      return unsubscribe;
    }, [dispatch]);

    return children
}

function MyApp({ Component, pageProps }) {
    return (
      <Provider store={store}>
        <AuthProvider>
          <Component {...pageProps}/>
        </AuthProvider>
      </Provider>
    )
}

export default MyApp

内容的提问来源于stack exchange，提问作者Brian Millot