React+Redux服务端渲染(SSR)报错：找不到react-redux上下文值

问题原因 #

你遇到的错误是因为服务端渲染时没有用Redux的Provider包裹<App />，同时服务端没有为每个请求创建独立的Redux Store实例：

• 客户端代码里你用Provider包裹了App，但服务端渲染逻辑直接渲染<App />，导致服务端生成的HTML中的组件无法访问Redux上下文。
• 即使把Provider移到App内部，若服务端没有传入正确的Store实例，或者使用了单例Store（服务端多用户共享会导致状态污染），依然会触发该错误。

修复步骤 #

1. 改造Store为工厂函数（避免状态污染） #

将你的store.js改为可创建独立实例的函数，确保每个请求都有专属的Store：

import { createStore } from 'redux';
import rootReducer from './reducers';

// 支持传入初始状态，用于同步服务端状态
export const createStoreInstance = (initialState = {}) => {
  return createStore(rootReducer, initialState);
};

2. 修改服务端渲染代码，添加Provider包裹并注入Store #

在服务端渲染时，为每个请求创建新的Store，并用Provider包裹App：

import path from 'path';
import fs from 'fs';

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { Provider } from 'react-redux'; // 引入Provider
import { createStoreInstance } from '../src/store'; // 引入Store工厂函数

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

app.get('/', (req, res) => {
  // 为当前请求创建独立的Store实例
  const store = createStoreInstance();
  
  // 用Provider包裹App，传入当前请求的Store
  const appHtml = ReactDOMServer.renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  );
  
  const indexFile = path.resolve('./build/index.html');

  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    // 可选但重要：将服务端Store的状态注入到HTML中，供客户端同步
    const finalHtml = data
      .replace('<div id="root"></div>', `<div id="root">${appHtml}</div>`)
      .replace(
        '</body>',
        `<script>window.__INITIAL_STATE__ = ${JSON.stringify(store.getState())}</script></body>`
      );

    return res.send(finalHtml);
  });
});

app.use(express.static('./build'));

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

3. 客户端同步服务端初始状态 #

修改客户端index.js，从服务端注入的全局变量中获取初始状态，保证客户端与服务端状态一致：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStoreInstance } from './store'

// 读取服务端注入的初始状态
const initialState = window.__INITIAL_STATE__ || {};
// 用初始状态创建客户端Store
const store = createStoreInstance(initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

4. 移除App内的Provider（可选） #

如果你之前将Provider移到了App.js中，现在可以移除它，让服务端和客户端的渲染入口统一用Provider包裹，逻辑更清晰：

const App = () => {
  return ( 
    <Router>
      <div className="content-wrapper">          
        <Switch>          
          <Route path='/login' component={LoginScreen} />
          <Route path='/register' component={RegisterScreen} />
        </Switch>
      </div>
    </Router>
  )
}

关键说明 #

• 服务端必须为每个请求创建独立的Store实例，否则多用户请求会共享状态，引发不可预期的bug。
• 同步服务端与客户端的初始状态是SSR的核心要求之一，能避免客户端 hydration 时的状态不匹配问题。

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