Redux新手求助：Axios POST请求报422错误，Redux流程存疑

你的Redux动作实现存在的核心问题 #

• 混合使用async/await与.then/.catch导致逻辑混乱：await已经会等待请求完成，无需额外链式调用.then，且你把.catch挂在dispatch方法后——dispatch是同步方法，不存在.catch，这行代码本身会抛出错误，直接中断流程。
• catch块逻辑错误：未接收错误参数，且res在catch作用域内未定义。当请求失败时，await会抛出错误进入catch，此时try块中的res并未被赋值，直接访问res.data会导致报错。
• 上述错误导致请求流程中断，所以Redux DevTools看不到POST_DEPARTMENT动作，错误处理也未正确执行。

422 Unprocessable Content错误排查方向 #

422是后端返回的请求验证失败错误，即便你认为请求对象结构一致，仍可能存在以下问题：

• 请求字段格式不匹配（比如日期格式、数字类型不符合要求）。
• 存在必填字段未传递，或字段值为空但后端不允许。
• Token异常：比如token过期、格式错误（注意Bearer 后面必须有空格，或token本身是否有效）。
• 建议在请求前打印request对象和token确认内容，或用Postman直接发送相同请求，验证是否能成功，排除前端代码之外的问题。

修正后的departmentAction.js代码 #

export const postDepartment = (request) => async(dispatch) => {
  try {
    const token = localStorage.getItem('bearer_token');
    // 统一用async/await处理异步请求，移除多余的.then链式调用
    const res = await api.post(`v2/science/departments/`, request, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    console.log('response', res);
    dispatch({
      type: POST_DEPARTMENT,
      payload: res.data // 建议传递实际返回数据，而非空字符串
    });
  } catch (err) {
    // 捕获错误对象，安全获取后端返回的错误信息
    dispatch({
      type: GET_ERRORS,
      payload: err.response?.data || '请求失败'
    });
    console.log('请求错误', err);
  }
}

额外注意事项 #

• 确认api是已配置好的Axios实例（比如是否设置了正确的baseURL），避免请求地址错误。
• 在CreateDepartment.js中，确保dispatch是通过useDispatch()（React-Redux Hooks）获取，或组件已通过connect连接Redux store，否则dispatch不会生效。

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