Redux报错：期望根reducer为函数，却收到undefined（Vanilla JS）

学习Redux时参照YouTube视频编写了一个Vanilla JS应用，安装Redux后运行终端抛出错误：

Error: Expected the root reducer to be a function. Instead, received: 'undefined'

我的index.js代码 #

const redux = require("redux");
const legacy_createStore = redux.legacy_createStore();

const BUY_CAKE = "BUY_CAKE"; //define action type

//Action creator function that returns the action object
function buyCake() {
  //action object with type as type of action and some other info
  return {
    type: BUY_CAKE, //set action type
    info: "first redux action",
  };
}

//(prevState, action) => newState

const initialState = {
  numberOfCakes: 10,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case BUY_CAKE:
      return {
        //always return new state objet since a reducer is a pure function
        ...state, //state object might have other states as well so it is safer to copy those states first and change the required state
        numberOfCakes: state.numberOfCakes - 1,
      };
    default:
      return state;
  }
};

const store = legacy_createStore(reducer);
console.log("Initial state : ", store.getState());
const unsubscribe = store.subscribe(() =>
  console.log("Update state : ", store.getState())
);
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
unsubscribe();

错误栈信息 #

Error: Expected the root reducer to be a function. Instead, received: 'undefined'
    at Object.createStore (D:\Taha\YouTube\Redux\redux_demo\node_modules\redux\lib\redux.js:166:11)
    at Object.<anonymous> (D:\Taha\YouTube\Redux\redux_demo\index.js:2:34)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

package.json配置 #

{
  "name": "redux_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "redux": "^4.2.1"
  }
}

原因 #

错误出在第二行代码：const legacy_createStore = redux.legacy_createStore();

这里错误地调用了legacy_createStore函数，而不是引用函数本身。调用后legacy_createStore的值变成了函数执行后的返回结果（因未传必填的reducer参数，内部逻辑导致返回undefined），后续用这个undefined去执行legacy_createStore(reducer)时，会把reducer传给一个不存在的函数，最终触发"根reducer是undefined"的错误。

解决方案 #

去掉redux.legacy_createStore()后面的括号，只引用函数本身，修改后的完整代码如下：

const redux = require("redux");
// 去掉函数调用的括号，仅引用函数
const legacy_createStore = redux.legacy_createStore;

const BUY_CAKE = "BUY_CAKE"; //define action type

//Action creator function that returns the action object
function buyCake() {
  //action object with type as type of action and some other info
  return {
    type: BUY_CAKE, //set action type
    info: "first redux action",
  };
}

//(prevState, action) => newState

const initialState = {
  numberOfCakes: 10,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case BUY_CAKE:
      return {
        //always return new state objet since a reducer is a pure function
        ...state, //state object might have other states as well so it is safer to copy those states first and change the required state
        numberOfCakes: state.numberOfCakes - 1,
      };
    default:
      return state;
  }
};

const store = legacy_createStore(reducer);
console.log("Initial state : ", store.getState());
const unsubscribe = store.subscribe(() =>
  console.log("Update state : ", store.getState())
);
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
unsubscribe();

修改后重新运行代码，即可正常输出状态变化。

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