React集成Redux Store后页面空白无报错，求排查解决

云上老周

2026-8-6

React集成Redux后页面空白的解决办法

问题排查与修复

1. 路径大小写不匹配（最常见隐性问题）

你的代码里存在两处可能的路径大小写问题：

store.js中导入rootReducer用的是./Reducer/rootReducer，如果你的文件夹实际是小写reducer，在Linux/macOS这类大小写敏感的系统里会直接导入失败。
App.js里导入store写的是./Store，如果你的文件实际是store.js（小写s），同样会因为系统识别不了大小写差异，导致无法加载store，Provider拿到无效值后页面渲染失败。

修复：
把导入路径改成和实际文件/文件夹完全一致的大小写：
比如store.js里改成：

import rootReducer from './reducer/rootReducer';

App.js里改成：

import store from './store';

2. Redux DevTools集成写法有问题

原store.js里判断浏览器的逻辑多余，还可能导致compose组合出错。直接用Redux官方推荐的简化写法，自动适配DevTools：

修改后的store.js：

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './Reducer/rootReducer'; // 这里记得和实际路径大小写一致

const initialState = {}
const middleWare = [thunk]

// 自动检测并集成DevTools，无需判断浏览器
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(applyMiddleware(...middleWare))
);

export default store;