跟随Redux速成课学习时遇根reducer类型错误求助

错误原因分析 #

这个错误说明传递给createStore的根reducer不是合法函数，而是空字符串。结合调用栈指向store.js第5行，问题出在根reducer的导入或定义环节，导致最终传入createStore的不是有效reducer函数。

分步解决方案 #

1. 检查根reducer的导入与定义 #

首先确保store.js中导入的reducers是合法函数：

• 验证store.js的导入路径：

  // 确认路径对应src/state/reducers/index.js，无拼写或大小写错误
  import reducers from "./reducers/index"
  

• 检查reducers/index.js的合并逻辑：

  import { combineReducers } from "redux";
  import accountReducer from "./accountReducer";
  
  // 确保combineReducers接收正确的配置对象，且导出合并后的函数
  const reducers = combineReducers ({
      account : accountReducer
  });
  
  export default reducers;
  

• 确认accountReducer.js的函数定义：

  const reducer = (state = 0, action) => {
      switch (action.type) {
          case "deposit":
              return state + action.payload;
          case "withdraw":
              return state - action.payload;
          default:
              return state;
      }
  };
  
  export default reducer;
  

2. 修复App.js中的拼写错误 #

App.js里存在状态属性拼写错误，会导致后续渲染无法正确获取值：

// 把state.acoount改为state.account
const account = useSelector((state) => state.account );

3. 补充缺失的actionCreators定义 #

你在App.js中导入了actionCreators但未提供相关代码，需要创建src/state/index.js并定义对应的action创建函数：

export const actionCreators = {
  depositMoney: (amount) => ({
    type: "deposit",
    payload: amount
  }),
  withdrawMoney: (amount) => ({
    type: "withdraw",
    payload: amount
  })
};

4. 验证依赖安装 #

确保已正确安装所需依赖：

npm install redux redux-thunk react-redux

额外排查点 #

• 文件名大小写：Linux/macOS系统区分文件名大小写，确保accountReducer.js、index.js等文件名与导入语句完全一致。
• 循环导入：避免reducer文件中导入store，导致初始化顺序冲突。

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