asyncThunk中调用dispatch后后续代码失效问题求助

核心问题 #

你在createAsyncThunk中错误地将dispatch作为业务参数传入，而非使用thunkAPI提供的内置dispatch，这会导致调度执行时抛出未捕获异常，直接中断后续代码运行。同时混用await与.then/.catch的写法，也可能加剧错误处理的混乱。

修复步骤 #

1. 改用thunkAPI内置的dispatch
   createAsyncThunk的回调函数第二个参数是thunkAPI对象，其中包含官方提供的dispatch，无需手动传入。
2. 统一异步错误处理方式
   避免同时使用await和.then/.catch，改用try/catch结构，让错误逻辑更清晰，也能捕获所有可能的异常。

修正后的代码 #

export const postLoginData = createAsyncThunk(
  'login/postLoginData',
  async (params, { dispatch }) => {
    let loginResponse = '';

    console.log('first')
    dispatch(setStatus({type: 'loading', payload: 'wait'}))
    console.log('second')

    try {
      const response = await postRequest('/o/token/coach', params);
      loginResponse = response.data;
      const data = response.data;
      if (data.access_token) {
        dispatch(loginSuccess(data));
        localStorage.setItem('Authentication', JSON.stringify(data));
      }
    } catch (err) {
      if (err.response?.status === 400) {
        loginResponse = { error: '400 Error' };
      }
    }

    dispatch(setStatus({ type: 'loading', payload: false }))
    console.log(loginResponse)
    return loginResponse
  }
)

调用方式调整 #

原来的调用如果是：

dispatch(postLoginData({ dispatch, params }))

现在改为直接传入业务参数：

dispatch(postLoginData(params))

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