React配合Redux开发时获取error值为undefined无法弹出错误提示

问题原因 #

1. 错误字段取值不匹配：你的API返回的错误信息存在error字段中，但action的错误处理里取了不存在的message字段，导致存入Redux的error值本身就是undefined。
2. Reducer返回值未保留原有状态：触发ALL_PRODUCT_FAIL时直接返回了新对象，没有携带原有state的其他字段，存在状态丢失隐患。

修复方案 #

1. 修正action中的错误字段取值

修改getProduct方法的catch块代码：

catch (error) {
  dispatch({
    type: ALL_PRODUCT_FAIL,
    // 把原来的data.message改成data.error，和API返回字段对应
    payload: error.response.data.error,
  });
}

2. 修正reducer的失败分支返回值

给ALL_PRODUCT_FAIL的返回值加上原有状态展开：

case ALL_PRODUCT_FAIL:
  return {
    ...state, // 保留原有products等字段
    loading: false,
    error: action.payload,
  };

3. 可选优化：弹窗后清空错误（避免重复触发）

在React组件的useEffect中，弹窗后分发清除错误的action：

useEffect(() => {
  if (error) {
    alert.error(error);
    dispatch({ type: CLEAR_ERRORS }); // 清空Redux中存储的错误
  }
  dispatch(getProduct());
}, [dispatch, error, alert]);

修改完成后即可正常弹出内容为Product Not Found的提示。

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