Multiple extraReducers

Question

i have several extraReducers, that do the same action. I wonder if i did it right:

const favouriteSlice = createSlice({
    name:  "favourite",
    initialState: {
        loading: true,
        entities: "initial",
        error: null,
    },
    reducers: {},
    extraReducers:{
        [addFavourite.pending && deleteFavourite.pending && getMyFavourites.pending]: (state) => {
            state.loading = true
        },
        [addFavourite.fulfilled && deleteFavourite.fulfilled && getMyFavourites.fulfilled]: (state, action) => {
            state.loading = false
            state.entities = action.payload
        },
        [addFavourite.rejected && deleteFavourite.rejected && getMyFavourites.rejected]: (state, action) => {
            state.loading = false
            state.error = action.payload
        },
    }
})

I tried to write each extraReducer separately, it also worked but it took up a lot of space.

Answer 1

This approach is acceptable, but it's quite hard to parse what each extraReducer is doing at a glance.

I would try and improve the legibility with a bit of formatting like so:

extraReducers: {
    [addFavourite.pending &&
    deleteFavourite.pending &&
    getMyFavourites.pending]: (state) => {
      state.loading = true;
    },
    [addFavourite.fulfilled &&
    deleteFavourite.fulfilled &&
    getMyFavourites.fulfilled]: (state, action) => {
      state.loading = false;
      state.entities = action.payload;
    },
    [addFavourite.rejected &&
    deleteFavourite.rejected &&
    getMyFavourites.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
  },