React Reducer报错：无法读取undefined的type属性的问题排查与修复方案

嘿，这个错误我之前也踩过！核心原因是你dispatch的action是undefined，导致Reducer尝试访问action.type时直接报错。结合你的代码，我们一步步排查修复：

一、先排查Action的调用问题 #

最容易触发这个错误的场景就是dispatch的时候没做对：

• 你是不是直接传了Action创建函数，而不是执行它的结果？比如：

  // ❌ 错误：传递的是函数引用，不是action对象
  dispatch(getUsers);
  // ✅ 正确：调用函数拿到action对象再dispatch
  dispatch(getUsers('测试用户'));
  

• 另外要确认所有Action（比如addUser、deleteUser）都像getUsers一样，正确返回包含type字段的对象，并且在使用的地方正确导入了。

二、修复Reducer里的逻辑bug #

你的Reducer里有几个明显的问题，不仅会导致后续报错，也可能间接引发当前的action问题：

1. ADD_USERS的ID计算错了 #

你现在的代码：

const newId = state.users[state.users.length-1] + 1

这里state.users[state.users.length-1]是数组最后一个用户对象，直接加1会得到NaN（对象加数字等于NaN），正确写法应该取对象的id：

const lastUser = state.users[state.users.length - 1];
const newId = lastUser ? lastUser.id + 1 : 1; // 顺便处理空数组的边界情况

2. ADD_USERS把users的结构搞混了 #

初始state里users是数组，但你在ADD_USERS里把它改成了对象：

users: { [newId] : { id: newId, name: action.name } }

这会导致后面DELETE_USER里的state.users.filter()直接报错（对象没有filter方法），而且完全偏离了初始的数据结构。正确的做法是在原数组基础上追加新用户：

users: [...state.users, { id: newId, name: action.payload }],

另外建议统一用action.payload传递数据（就像你的getUsers那样），所以你的addUser Action应该写成：

export function addUser(name) {
  return {
    type: ADD_USERS,
    payload: name
  };
}

3. DELETE_USER的小优化 #

可以加上loading: false保持状态一致性，同时建议用payload传递id，和其他Action统一：

case DELETE_USER :
  return {
    ...state,
    users: state.users.filter(i => i.id !== action.payload),
    loading: false
  }

三、最后检查Store配置 #

确保你的Redux Store正确注册了这个reducer，要是用了异步中间件（比如redux-thunk），也要确认配置没问题——不过你当前的Action都是同步的，暂时可能不需要，但后续加异步逻辑的时候要注意。

先按上面的步骤调整，应该就能解决这个错误啦！

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