当我在此之前放置调度方法时，切片文件中的 asyncThunk 函数中的 api 请求不起作用

Question

我有这个 asyncThunk 操作，一切都很好，直到我在发送请求之前进行了

dispatch

调用。因此，此

dispatch

调用之后的每个代码都不再起作用。 “第一个”进入日志，但“第二个”没有。我不知道为什么这个

dispatch

会阻止我的 asyncThunk 函数中的下一个代码。

我的切片文件：

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

    let loginResponse = '';

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

    await postRequest('/o/token/coach', params)
      .then(response => {
        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
  }
)

Answer 1

您确实应该使用

dispatch

上可用的

thunkApi

函数，将 第二个 参数传递给

createAsyncThunk

有效负载创建者。

将

async/await

与 Promise 链混合起来也是一种 Javascript 反模式；选择其中之一。

基本示例：

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

    thunkApi.dispatch(setStatus({ type: 'loading', payload: 'wait' }));

    try {
      const { data } = await postRequest('/o/token/coach', params);
      loginResponse = data;

      if (data.access_token) {
        thunkApi.dispatch(loginSuccess(data));
        localStorage.setItem('Authentication', JSON.stringify(data));
      }
    } catch(err) {
      if (err.response.status === 400) {
        loginResponse = { error: '400 Error' };
      }
    }

    thunkApi.dispatch(setStatus({ type: 'loading', payload: false }));

    return loginResponse;
  }
);

由于您使用的是 Redux-Toolkit 和

createAsyncAction

，当您确实应该添加减速器时，通过手动调度

setStatus

和

loginSuccess

操作来管理任何“加载”和“身份验证”状态，您有点错过了重点处理已分派

postLoginData.pending

、

postLoginData.fulfilled

和

postLoginData.rejected

操作的案例，当您将 postLoginData 分派到商店和操作流程时，这些操作会

自动

被分派。

这是建议的重构：

export const postLoginData = createAsyncThunk(
  'login/postLoginData',
  async ({ params }, thunkApi) => {
    try {
      const { data } = await postRequest('/o/token/coach', params);
      
      if (data.access_token) {
        localStorage.setItem('Authentication', JSON.stringify(data));
      }

      return data;
    } catch(error) {
      return thunkApi.rejectWithValue(error.response.message);
    }
  }
);

状态切片，添加减速器案例来处理

.pending

、

.fulfilled

和

.rejected

操作。

const statusSlice = createSlice({
  name: "status",
  initialState: {
    status: false,
  },
  extraReducers: builder => {
    builder
      ....
      .addCase(postLoginData.pending, (state) => {
        state.status = "wait";
      })
      .addCase(postLoginData.fulfilled, (state) => {
        state.status = false;
      })
      .addCase(postLoginData.pending, (state) => {
        state.status = false;
      })
      ....;
  },
});

auth 切片，添加一个减速器案例来处理

.fulfilled

操作。

const authSlice = createSlice({
  name: "auth",
  initialState: {
    ....
  },
  extraReducers: builder => {
    builder
      ....
      .addCase(postLoginData.fulfilled, (state, action) => {
        // update whatever state with the fetched data in action.payload
      })
      ....;
  },
});