Redux报错Expected the root reducer to be a function排查求助
问题描述
开发过程中遇到持续无法解决的报错:
未捕获错误:Expected the root reducer to be a function. Instead, received:''
已尝试所有可检索到的相关解决方案,均未生效。
相关代码片段
rootReducer 实现
import {combineReducers} from 'redux' import changeCategoryReducer from './changeCategoryReducer' import categoryListReducer from './categoryListReducer' import productListReducer from './productListReducer' import cartReducer from './cartReducer' import saveProductReducer from './saveProductReducer' const rootReducer = combineReducers({ changeCategoryReducer, categoryListReducer, productListReducer, cartReducer, saveProductReducer }); export default rootReducer;
configureStore 配置
import {createStore, applyMiddleware} from 'redux' import * as rootReducer from './index.js' import thunk from 'redux-thunk' export default function configureStore(){ return createStore(rootReducer, applyMiddleware(thunk)) }
项目入口 index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './components/root/App'; import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Provider } from 'react-redux' import configureStore from './redux/reducers/configureStore' import 'alertifyjs/build/css/alertify.min.css' import { BrowserRouter } from 'react-router-dom' const store = configureStore(); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter> </React.StrictMode> ); reportWebVitals();
解决方案
报错根源是configureStore文件中rootReducer的导入方式错误:
- 你的rootReducer采用默认导出(
export default rootReducer),但导入时使用了命名空间导入语法import * as rootReducer from './index.js',这种写法拿到的是整个ES模块对象,不是rootReducer函数本身,传给createStore的参数类型不符合要求,直接触发报错。 - 将
configureStore中的导入语句替换为默认导入即可修复:
// 替换原错误的导入语句 import rootReducer from './index.js'
- 如果修改后仍报错,检查
./index.js的相对路径是否正确,确认指向你编写rootReducer的文件,避免导入错其他同名文件。
内容的提问来源于stack exchange,提问作者Adonis
相关产品推荐
相关产品推荐

