Redux报错Expected the root reducer to be a function排查
问题成因
报错根源是你错误地在引用Redux API时加了空括号,直接执行了函数,而非获取函数本身的引用。
你代码中这两行是问题核心:
const createStore = redux.createStore() const combineReducers = redux.combineReducers()
redux.createStore是用来创建store的函数,要求第一个参数必须传入reducer函数。你写的空括号()代表无参数直接调用该方法,此时Redux检测到传入的reducer位置是undefined,就会抛出你看到的Expected the root reducer to be a function错误。此时赋值给createStore变量的根本不是创建store的方法,自然无法正常使用。
另外你的代码还有一处逻辑顺序错误:先执行了store.dispatch(orderCake())再打印状态,此时拿到的是action派发后的状态,并非初始状态。
修复方案
- 去掉
redux.createStore、redux.combineReducers后面多余的空括号,直接将函数本身赋值给变量 - 调整代码执行顺序:先获取并打印初始状态,可选添加状态订阅监听更新,最后再派发action
修复后的完整代码:
const redux = require('redux'); // 移除末尾空括号,获取函数引用 const createStore = redux.createStore const combineReducers = redux.combineReducers // Action构造函数 function orderCake() { return { type: 'CAKE_ORDERED', payload: 1 } } // 蛋糕模块初始状态 const initialStateCake = { numberOfCakes: 10 } const cakeReducer = (state = initialStateCake, action) => { switch(action.type) { case 'CAKE_ORDERED': return { ...state, numberOfCakes: state.numberOfCakes - action.payload } default: return state } } const store = createStore(cakeReducer) // 打印初始状态 console.log("Initial State", store.getState()) // 订阅状态变化,每次更新后打印最新值 store.subscribe(() => { console.log("Updated State", store.getState()) }) // 派发下单蛋糕的action store.dispatch(orderCake())
运行后输出符合预期:
Initial State { numberOfCakes: 10 } Updated State { numberOfCakes: 9 }
补充说明:当前Redux版本已将
createStore标记为废弃API,新写代码推荐使用@reduxjs/toolkit提供的configureStore方法,旧API暂时仍可兼容运行。
内容的提问来源于stack exchange,提问作者user18658903
相关产品推荐
相关产品推荐

