Gatsby SSR集成Redux失败：组件提示未被Provider包裹

我正在尝试为Gatsby配置SSR，但给组件添加Redux Provider时遇到问题。直接在index中提供store/Provider的话Redux能正常工作，但用下面的方式配置时，一直收到错误：

could not find react-redux context value; please ensure the component is wrapped in <Provider>

难道ReduxWrapper.js里没有完成包裹吗？

相关代码 #

gatsby-ssr.js #

import wrapWithProvider from "./src/state/ReduxWrapper";
export const wrapRootElement = wrapWithProvider;

gatsby-browser.js #

import wrapWithProvider from "./src/state/ReduxWrapper";
export const wrapRootElement = wrapWithProvider;

ReduxWrapper.js #

import React from "react";
import { Provider } from "react-redux";
import configureStore from "./configureStore";

const store = configureStore();

export default ({ element }) => <Provider store={store}>{element}</Provider>;

index.js（主入口） #

import * as React from "react";
import SwitchThemeMode from "../components/ThemeToggle/ThemeToggle";

const Root = () => {
    return <SwitchThemeMode />;
};

export default Root;

ThemeToggle.tsx #

import { Button } from "@mui/material";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { toggleTheme } from "../../state/reducers/layout";
import { RootState } from "../../state/ReduxStore";

const SwitchThemeMode: React.FC = () => {
    const { theme } = useSelector((state: RootState) => state.layout);
    const dispatch = useDispatch();

    return (
        <Button
            onClick={() =>
                dispatch(
                    toggleTheme({
                        mode: "dark",
                    })
                )
            }
        >
            {theme === "dark" ? "moon" : "sun"}
        </Button>
    );
};

export default SwitchThemeMode;

问题原因与解决方案 #

你的ReduxWrapper.js写法存在问题，当前是全局单例store，但Gatsby的wrapRootElement在SSR和客户端渲染时的执行逻辑要求我们每次都创建新的store实例，否则会导致服务端和客户端store状态不一致，同时也会引发上下文找不到的问题。

修正步骤： #

1. 修改ReduxWrapper.js，取消提前创建全局store，改为在组件函数内部创建，确保每次渲染都有独立的store实例：

import React from "react";
import { Provider } from "react-redux";
import configureStore from "./configureStore";

export default ({ element }) => {
  // 每次调用wrapWithProvider时创建新的store
  const store = configureStore();
  return <Provider store={store}>{element}</Provider>;
};

2. 验证configureStore的写法，确保它是一个返回新store实例的函数，而非直接导出单例：
   比如你的configureStore.js应类似这样：

import { configureStore } from '@reduxjs/toolkit';
import layoutReducer from './reducers/layout';

export default function configureStore() {
  return configureStore({
    reducer: {
      layout: layoutReducer,
    },
  });
}

3. 清除缓存重启开发服务器，执行gatsby clean再启动服务，避免Gatsby缓存旧构建内容导致问题残留。

额外说明 #

直接在index里包裹Provider能工作，是因为客户端渲染时上下文能正确传递，但SSR场景下Gatsby需要wrapRootElement在服务端和客户端都能正确注入store上下文，全局单例store会破坏这种一致性，导致服务端渲染的组件找不到Provider上下文。

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