store.js中'reducer'标识符重复声明错误求助

问题说明 #

跟随视频教程开发React+Redux项目，此前运行正常，现在出现语法错误：Parsing error : Identifier 'reducer' has already been declared in store.js。尝试替换createStore为configureStore后问题仍存在。

错误根源 #

在store.js中存在重复声明同名变量的问题：

1. 从./reducers导入了名为reducer的变量
2. 随后又通过const reducer = combineReducers(...)声明了同名变量

JavaScript不允许在同一作用域内重复声明标识符，这就是报错的直接原因。

修复方案 #

方案1：移除无用的导入（推荐） #

如果不需要从./reducers导入的reducer，直接删除该导入语句，同时改用Redux Toolkit的configureStore简化配置（自带thunk中间件和DevTools支持）：

// 修正后的 store.js
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import { productListReducer } from './reducers/productReducers';

const initialState = {};

// 重命名变量避免冲突，这里改为rootReducer
const rootReducer = combineReducers({
    productList: productListReducer,
});

// 使用configureStore替代createStore，无需手动配置compose和middleware
const store = configureStore({
  reducer: rootReducer,
  preloadedState: initialState,
  // 如需额外配置thunk（configureStore默认已包含thunk）
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export default store;

方案2：重命名导入的变量 #

如果确实需要保留从./reducers导入的内容，给导入的变量重命名：

// 修正后的 store.js
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import { productListReducer } from './reducers/productReducers';
// 给导入的reducer重命名为appReducer
import reducer as appReducer from './reducers';

const initialState = {};

const rootReducer = combineReducers({
    productList: productListReducer,
    // 使用重命名后的变量
    app: appReducer,
});

const store = configureStore({
  reducer: rootReducer,
  preloadedState: initialState,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export default store;

额外提示 #

• 你的package.json同时包含了前端和后端的配置，建议拆分两个独立的package.json分别管理前后端依赖，避免版本冲突
• Redux Toolkit的configureStore已经内置了redux-thunk和Redux DevTools集成，无需手动配置composeEnhancer和applyMiddleware，代码更简洁可靠

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