CODEWITHSUNDEEP
javascriptreduxredux-toolkit
dan_boy
dan_boy

Reputation: 2009

Redux-Toolkit: How to reject a "createAsyncThunk"?

How to reject properly with createAsyncThunk. I have an asynchronous function that checks whether a mail address already exists or not. The response of the function is an empty string if there is no registered mail address and the user object of the registered user if the user exists.

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

In both cases the data comes back and no error occurs. How do I reject the createAsyncThunk in such a case?

Upvotes: 7

Views: 19041

Answers (2)

fruitloaf
fruitloaf

Reputation: 2892

here is slightly different syntax but the same thing:

Thunk Function:

export const fetchCountryData = createAsyncThunk(
    "",
    (anyNameOrEven_, { rejectWithValue }) => {
        return axios
            .get(countriesAPIRoute)
            .then((el) => el.data)
            .catch((err) => {
                console.log("err", err);
                return rejectWithValue("omg fail");
            });
    }
);

part of your Slice:

extraReducers: (builder) => {
        builder.addCase(fetchCountryData.rejected, (state, action) => {
            console.log("the info was rejected");
        });

basically if the responds from server is and Error, it will trigger the .REJECTED part

my server side code is:

app.get("/countries-api", (req, res) => {
    console.log("=======================");
    console.log("countries api");
    throw new Error("not found");
});

Upvotes: 0

Lin Du
Lin Du

Reputation: 102287

You can use rejectWithValue to handle Thunk Errors.

E.g.

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('[email protected]')).then(() => {
  console.log(store.getState());
});

Output of the console:

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

Upvotes: 9

Related Questions