Next.js中用Provider包裹App时出现react-redux上下文值未找到错误怎么办？

我在Next.js里尝试用Provider包裹外层App，想实现页面刷新时自动向后端发请求，这是我能想到的最简单的实现方式。参考相关建议加了wrapper并把组件传入App函数后，碰到了这个错误：

Error: could not find react-redux context value; please ensure the component is wrapped in a

无法正常运行的代码如下：

import { useEffect } from 'React';
import { useDispatch } from 'react-redux'
import Router from 'next/router';
 
// redux
import { store } from '../store/store';
import { Provider } from 'react-redux'

import { UserInfoAsync } from '../store/reducers/user';
 

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

export default function App({ Component, pageProps }) {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(UserInfoAsync());
  },[])

  return (
     <AppWrapper {...Component} {...pageProps} />
  )
}

//<Provider store={store}>
//export default wrapper.withRedux(MyApp)

问题原因 #

你在App组件里直接调用了useDispatch，但此时App还没被Provider包裹——AppWrapper是在App的return里才渲染的，也就是说App本身处于Redux上下文之外，自然找不到context值，触发报错。

修复方案 #

把需要执行dispatch的逻辑移到Provider内部的组件里，让Redux上下文先生效，再调用hooks。

修改后的代码示例：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { store } from '../store/store';
import { Provider } from 'react-redux';
import { UserInfoAsync } from '../store/reducers/user';

// 内部组件，处于Provider包裹范围内
function AppContent({ Component, pageProps }) {
  const dispatch = useDispatch();
  
  useEffect(() => {
    // 页面刷新时触发请求
    dispatch(UserInfoAsync());
  }, []);
  
  return <Component {...pageProps} />;
}

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <AppContent Component={Component} pageProps={pageProps} />
    </Provider>
  );
}

或者也可以合并逻辑，直接在Provider内部处理：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { store } from '../store/store';
import { Provider } from 'react-redux';
import { UserInfoAsync } from '../store/reducers/user';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      {/* 用匿名组件包裹，确保在Provider内调用hooks */}
      <>
        {(() => {
          const dispatch = useDispatch();
          useEffect(() => {
            dispatch(UserInfoAsync());
          }, []);
          return <Component {...pageProps} />;
        })()}
      </>
    </Provider>
  );
}

核心原则：所有使用useDispatch/useSelector的组件或逻辑，必须放在<Provider>的子层级里，这样才能获取到Redux的上下文。

内容的提问来源于stack exchange，提问作者Lukas Guldstøv