Next.js集成Redux报错：未找到react-redux上下文值

报错的核心原因是：MyApp 组件调用 useDispatch 时，<Provider> 还未完成渲染。useDispatch 依赖 Provider 提供的 Redux 上下文，但当前代码里 Provider 是 MyApp 返回的内容，组件本身并没有被 Provider 包裹，导致调用 useDispatch 时找不到上下文。

把存入 Redux 的逻辑移到一个被 Provider 包裹的内部组件中，让 useDispatch 能正常获取上下文。修改后的 _app.tsx 代码如下：

import { useDispatch, useEffect } from 'react-redux';
import { Provider } from 'react-redux';
import store from './store';
import { saveData } from './your-action-path';

function MyApp({ Component, pageProps, data }: AppProps & { data: any }) {
  return (
    <Provider store={store}>
      <DataInitializer data={data} />
      <Component {...pageProps} />
    </Provider>
  );
}

function DataInitializer({ data }: { data: any }) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(saveData(data));
  }, [dispatch, data]);

  return null;
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const data = await fetch(`http://base-url/my-route`).then((res) => res.json());

  let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps, data };
};

export default MyApp;

• DataInitializer 组件被 Provider 包裹，调用 useDispatch 时能正确获取 Redux 上下文。
• 将 data 加入 useEffect 的依赖数组，确保数据更新时（遵循 React 最佳实践）会重新执行 dispatch。
• 移除原 MyApp 组件中直接调用 useDispatch 的逻辑，避免在 Provider 未渲染时使用上下文的问题。

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