Redux状态中profile更新后为何返回null而非空对象？

核心原因 #

axios默认仅在网络层面出错（比如断网、DNS解析失败）时才会触发catch回调；如果是HTTP状态码非2xx的响应（比如404、500），axios会将其视为成功请求进入then回调。如果你的后端在无用户Profile时返回404这类错误状态码，此时代码会执行then里的逻辑，把res.data（可能为null）赋值给profile，而非执行catch里的payload: {}。

另外，也有可能后端返回200但res.data为null，此时同样会导致profile被设为null。

解决方案 #

方案1：强制HTTP错误进入catch回调

修改getCurrentProfile的请求逻辑，让非2xx状态码的响应也进入catch：

export const getCurrentProfile = () => dispatch => {
  dispatch(setProfileLoading());
  axios.get('/api/profile', {
    // 仅当状态码为200-299时视为成功，其他均触发catch
    validateStatus: status => status >= 200 && status < 300
  })
  .then(res => dispatch({
    type: GET_PROFILE,
    payload: res.data 
  }))
  .catch(error =>
    dispatch({
      type: GET_PROFILE,
      payload: {}
    })
  );
};

方案2：对返回数据做兜底处理

无论请求是否成功，只要返回的res.data为null或undefined，就用空对象兜底：

export const getCurrentProfile = () => dispatch => {
  dispatch(setProfileLoading());
  axios.get('/api/profile')
  .then(res => dispatch({
    type: GET_PROFILE,
    payload: res.data || {} // 空值兜底
  }))
  .catch(error =>
    dispatch({
      type: GET_PROFILE,
      payload: {}
    })
  );
};

方案3：在Reducer层做兜底

直接在Reducer里对action.payload进行空值判断，确保profile不会是null：

case GET_PROFILE:
  return {
    ...state,
    profile: action.payload || {}, // 若payload为null则替换为空对象
    loading: false
  }

验证建议 #

1. 在getCurrentProfile的then和catch里分别加console.log，确认请求出错时进入的是哪个回调
2. 查看浏览器Network面板，确认请求的状态码和返回数据内容

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