Next.js项目使用useDispatch报错：找不到react-redux上下文值

你遇到的问题核心是组件调用useDispatch时，自身并没有被<Provider>包裹。

看你的代码：AppComponent组件里先执行了const dispatch = useDispatch()，然后才在return里渲染<Provider>。React的上下文（Context）是向下传递的，<Provider>只能影响它内部渲染的组件，而AppComponent本身不在这个上下文范围内，所以useDispatch找不到Redux的context值，自然报错。

有两种常见的修复方式：

方式一：将useDispatch的逻辑移到<Provider>内部的组件中 #

把检查登录状态的逻辑抽成一个独立组件，放在<Provider>里面，这样这个组件就能获取到Redux的context：

import { Provider } from 'react-redux';
import { store } from '../redux/store';
import axios from "axios";
import { useDispatch } from 'react-redux';
import { useEffect } from 'react';

axios.defaults.withCredentials = true;

// 抽离登录状态检查组件
const CheckLoginStatus = () => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(getLoginInStatus());
  }, [dispatch]);
  
  return null; // 这个组件不需要渲染UI
};

const AppComponent = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <CheckLoginStatus />
      <div>
        <ToastContainer />
        <Component {...pageProps} />
      </div>
    </Provider>
  )
} 

export default AppComponent

方式二：将<Provider>提升到AppComponent外部 #

如果是Next.js的_app.js文件，你可以把<Provider>作为最外层的包裹，确保整个应用都在Redux上下文内：

import { Provider } from 'react-redux';
import { store } from '../redux/store';
import axios from "axios";
import { useDispatch, useEffect } from 'react-redux';

axios.defaults.withCredentials = true;

// 这里创建一个内部组件来使用useDispatch
const AppInner = ({ Component, pageProps }) => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(getLoginInStatus());
  }, [dispatch]);
  
  return (
    <div>
      <ToastContainer />
      <Component {...pageProps} />
    </div>
  );
};

const AppComponent = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <AppInner Component={Component} pageProps={pageProps} />
    </Provider>
  )
} 

export default AppComponent

Redux的<Provider>是通过React Context传递store的，只有在<Provider>内部渲染的组件才能通过useDispatch、useSelector等钩子访问到store。组件自身如果在<Provider>外面调用这些钩子，必然会找不到context值。

内容的提问来源于stack exchange，提问作者Lanre Afeez