createAsyncThunk: Error: addCase cannot be called with two reducers for the same action type

Question

This error occurred when I connect actions to extraReducers My code is

export const fetchCountries = createAsyncThunk(
  `country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `country`,
  async ({ } => {})

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});

    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

and if I run I get this error: Error: addCase cannot be called with two reducers for the same action type

Alexey Nikonov · Answer 1 · 2022-05-01T19:18:36.037

61

This happens because in my actions there is few AsyncThunks actions with the same typePrefix.

So it must have different names:

export const fetchCountries = createAsyncThunk(
  `getCountry`, //<------ this first argument (name) must be unique
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `postCountry`,
  async ({ } => {})

edited May 01 '22 at 19:18

answered Jul 14 '21 at 09:24

Alexey Nikonov

4,958
5
39
66

1

Thanks for helping reduce time required to find a thunk copy-paste mistake :) – Vexter Nov 01 '21 at 13:00

score 5 · Answer 2 · answered May 21 '22 at 17:42

In my case, the same error message was show, but it was a different mistake:

.addCase(setAddress.pending, (state, action) => {
    state.setAddressStatus = 'Pending';
})
.addCase(setAddress.fulfilled, (state, action) => {
    state.setAddressStatus = 'Fulfilled';  
})
.addCase(setAddress.fulfilled, (state, action) => { // I repeated fulfilled 
    state.getAddressesStatus = 'Rejected';
    console.error(action.error);
})

It took me some minutes to find the problem, may help someone.

score 3 · Answer 3 · answered Apr 29 '22 at 04:17

On CreateAsycThunk you have mentioned both the string of the same name it should be like this

export const fetchCountries = createAsyncThunk(
  `country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `saveCountry`,
  async ({ } => {})

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});

    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

It looks like the difference is both are named \`country\` in the question and here one is labeled \`country\` and the other \`saveCountry\` — Henry Ecker, Apr 30 '22 at 03:23

score 2 · Answer 4 · answered Feb 20 '22 at 14:10

createasyncthunk has two main parameters, one of type string and the latter callback function which has api and thunk as paramters. You are likely to be pardon if having a single asyncthunk in your slice, which has "" as data, but if you have two or more asyncthunks then checks will be made on each thunk, if two or more of them has similar "" or "identical" names then you will get disturbing error. "createAsyncThunk: Error: addCase cannot be called with two reducers for the same action type"

score 1 · Answer 5 · answered Jun 22 '23 at 18:44

1

If your createAsnyncThunk is using the same typePrefix like

const updateEventsCal = createAsyncThunk(
EVENTS_CAL_UPDATE, // using an existing typePrefix say EVENTS_CAL_ADD
async (data) => {
 }

This will throw the same error.

answered Jun 22 '23 at 18:44

Walker

891
2
11
26

score 0 · Answer 6 · answered Jan 03 '23 at 23:12

0

make it this way

const  {pending,fulfilled,rejected} = fetchCountries
    builder.addCase(pending, isFetching);
    builder.addCase(rejected, error);
    builder.addCase(fulfilled, (state, action) => {});

answered Jan 03 '23 at 23:12

Seif

36
4

score 0 · Answer 7 · edited Jul 17 '23 at 04:18

You are having this error because you are attempting to add multiple asyncthunks with the same typePrefix ie the first argument in the createAsyncthunk. Each asyncthunk must have a unique typePrefix. To resolve this you simply create a unique typePrefix for each createAsyncthunk

export const fetchCountries = createAsyncThunk(
  `fetch-country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `save-country`,
  async ({ } => {})

You can also have the same error message when you try to add multiple reducers for the same action type using the addCase function ie

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});
    
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});
 
    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

score 0 · Answer 8 · answered Aug 07 '23 at 18:30

i had the same problem,have a look below:

//api to get data customers
export const getCustomers = createAsyncThunk('/api/users/customers',async() =>{
    ...
});
//api to add customer
export const addCustomer = createAsyncThunk<User,{ user: User, token: string }>('/api/users/add_customer', async ({ user, token }) => {
    ...
});

i got the problem cuz i wrote this path /api/users/customers in frist and second asyncthunk, to solve it ,just need to rename it, in my case, first i didn't change it /api/users/customers and second /api/users/add_customer

createAsyncThunk: Error: addCase cannot be called with two reducers for the same action type

8 Answers8