React Redux Thunk抛出错误时组件catch未触发的问题及解决问询

一、组件中.catch不执行的原因 #

1. createAsyncThunk的Promise特性：dispatch(createAsyncThunk生成的thunk)返回的Promise始终处于resolved状态，无论异步操作成功还是失败。它resolve的结果是对应的action对象（成功时为fulfilled类型，失败时为rejected类型），不会触发Promise的reject状态，因此链式调用的.catch永远不会因createAudio的错误触发。
2. 错误处理方式错误：你在thunk的catch块中直接throw err，而非使用rejectWithValue返回自定义错误数据。这种情况下，rejected action的payload会是undefined，错误信息会存于action.error中；若使用rejectWithValue，错误数据会被放入action.payload，同时action的type会标记为rejected。

二、正确处理分步异步操作错误的方案 #

方案1：在then中判断action状态 #

既然dispatch返回的Promise总是resolve，可在.then中检查action的状态来区分成功/失败：

const handleCreateAudioTrack = async (values: IAudioFormValues) => {
  const createAudioRequest = {/* ... */};
  dispatch(createAudio(createAudioRequest))
    .then(action => {
      // 检查action是否为fulfilled状态
      if (createAudio.fulfilled.match(action)) {
        // 无错误，执行额外逻辑并进入下一步
        return dispatch(bindAudio());
      } else {
        // 抛出错误，触发后续catch
        throw action.payload || action.error;
      }
    })
    .catch(err => {
      // 统一处理错误，比如UI提示
      console.error('操作失败:', err);
    });
}

同时修正thunk的错误处理，改用rejectWithValue：

export const createAudio = createAsyncThunk<
  IAudioDetailData,
  IAudioCreateRequest,
  { rejectValue: IThunkCustomError }
>(
  "createAudio",
  async (audioTrack: IAudioCreateRequest, { rejectWithValue }) => {
    try {
      const response = await axios.post(
        backendPaths.AUDIO_CREATE_URL(),
        JSON.stringify(audioTrack)
      );
      return response.data;
    } catch (err) {
      // 用rejectWithValue返回错误数据，确保action.payload包含错误信息
      return rejectWithValue(err.response?.data as IThunkCustomError);
    }
  }
);

方案2：使用unwrapResult辅助函数 #

Redux Toolkit提供的unwrapResult函数可将dispatch返回的action转换为普通Promise：若action是fulfilled状态则resolve payload，若为rejected状态则reject错误，这样就能正常使用.catch：

import { unwrapResult } from '@reduxjs/toolkit';

const handleCreateAudioTrack = async (values: IAudioFormValues) => {
  const createAudioRequest = {/* ... */};
  dispatch(createAudio(createAudioRequest))
    .then(unwrapResult) // 提取成功payload或抛出错误
    .then((audioData) => {
      // 确认无错误，执行额外逻辑
      return dispatch(bindAudio());
    })
    .catch(err => {
      // 处理所有错误
      console.error('操作出错:', err);
    });
}

方案3：用async/await简化逻辑 #

利用handleCreateAudioTrack本身的async特性，结合unwrapResult让代码更直观：

import { unwrapResult } from '@reduxjs/toolkit';

const handleCreateAudioTrack = async (values: IAudioFormValues) => {
  try {
    const createAudioRequest = {/* ... */};
    const createAction = await dispatch(createAudio(createAudioRequest));
    const audioData = unwrapResult(createAction);
    
    // 第一步成功，执行额外逻辑
    await dispatch(bindAudio());
  } catch (err) {
    // 统一捕获所有步骤的错误
    console.error('操作失败:', err);
  }
}

三、分步校验错误的进阶实现 #

若需要逐步骤校验错误并决定是否继续执行后续操作，可拆分逻辑单独处理每一步：

const handleCreateAudioTrack = async (values: IAudioFormValues) => {
  const createAudioRequest = {/* ... */};
  
  // 第一步：创建音频
  try {
    const createAction = await dispatch(createAudio(createAudioRequest));
    const audioData = unwrapResult(createAction);
    console.log('音频创建成功:', audioData);
  } catch (err) {
    console.error('创建音频失败:', err);
    // 第一步失败，终止后续操作
    return;
  }
  
  // 第二步：绑定音频
  try {
    const bindAction = await dispatch(bindAudio());
    unwrapResult(bindAction);
    console.log('音频绑定成功');
  } catch (err) {
    console.error('绑定音频失败:', err);
  }
}

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