Question

如何正确拒绝createAsyncThunk。我有一个异步函数来检查邮件地址是否已经存在。如果没有注册邮件地址，则函数的响应为空字符串，如果用户存在，则为注册用户的用户对象。

export const checkIfEmailExists = createAsyncThunk(
  "user/checkIfEmailExists",
  async (mail) => {
    const response = await mailExists(mail).promise();
    if (response.user && response.user.length > 0) {
      reject();
    } else {
      resolve();
    }
  }
);

在这两种情况下，数据都返回并且没有发生错误。在这种情况下，我如何拒绝 createAsyncThunk？

Answer 1

您可以使用 rejectWithValue 到 handle Thunk Errors。

例如

import {
  configureStore,
  createAsyncThunk,
  createSlice,
} from '@reduxjs/toolkit';

function mailExists(mail) {
  return {
    async promise() {
      // return { user: [{ name: 'teresa teng', mail }] };

      return { user: [] };
    },
  };
}

export const checkIfEmailExists = createAsyncThunk(
  'user/checkIfEmailExists',
  async (mail: string, { rejectWithValue }) => {
    const response = await mailExists(mail).promise();
    if (response.user && response.user.length > 0) {
      return response.user[0];
    } else {
      return rejectWithValue('No user found');
    }
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: {},
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(checkIfEmailExists.fulfilled, (state: any, action) => {
        state.data = action.payload;
      })
      .addCase(checkIfEmailExists.rejected, (state: any, action) => {
        state.error = action.payload;
      });
  },
});

const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
});

store.dispatch(checkIfEmailExists('example@gmail.com')).then(() => {
  console.log(store.getState());
});

控制台输出：

{ user: { data: {}, error: 'No user found' } }

Redux-Toolkit：如何拒绝“createAsyncThunk”？

1 个答案: