I created a global error handling slice with redux toolkit. And I would like to refactor it to make it more "dry":

const errorsSlice = createSlice({
  name: "error",
  initialState,
  reducers: {
    clearError: (state) => {
      state.errors = null;
      state.isOpen = false;
    },
  },
  extraReducers: {
    [createScript.rejected]: (state, { payload }) => {
      const errorArray = Object.values(payload.message).map(
        (key) => key.message
      );
      state.errors = errorArray;
      state.isOpen = true;
    },
    [createScene.rejected]: (state, { payload }) => {
      const errorArray = Object.values(payload.message).map(
        (key) => key.message
      );
      state.errors = errorArray;
      state.isOpen = true;
    },
  },
});

The 2 extraReducers do the exact same thing and the payload is normalized. My code works fine as it is.

Is there a way to "bine" the 2 to a single extraReducer (at the end it will be much more)?

I created a global error handling slice with redux toolkit. And I would like to refactor it to make it more "dry":

const errorsSlice = createSlice({
  name: "error",
  initialState,
  reducers: {
    clearError: (state) => {
      state.errors = null;
      state.isOpen = false;
    },
  },
  extraReducers: {
    [createScript.rejected]: (state, { payload }) => {
      const errorArray = Object.values(payload.message).map(
        (key) => key.message
      );
      state.errors = errorArray;
      state.isOpen = true;
    },
    [createScene.rejected]: (state, { payload }) => {
      const errorArray = Object.values(payload.message).map(
        (key) => key.message
      );
      state.errors = errorArray;
      state.isOpen = true;
    },
  },
});

The 2 extraReducers do the exact same thing and the payload is normalized. My code works fine as it is.

Is there a way to "bine" the 2 to a single extraReducer (at the end it will be much more)?

• javascript
• reactjs
• redux-toolkit

3 Answers 3

I don't believe there is a way to bine the two cases reducers into a single case reducer, but you can certainly provide the same reducer function to each. Refactor the duplicate reducer functions into a single mon reducer function.

const rejectionReducer = (state, { payload }) => {
  const errorArray = Object.values(payload.message).map(
    (key) => key.message
  );
  state.errors = errorArray;
  state.isOpen = true;
};

...

const errorsSlice = createSlice({
  name: "error",
  initialState,
  reducers: {
    clearError: (state) => {
      state.errors = null;
      state.isOpen = false;
    },
  },
  extraReducers: {
    [createScript.rejected]: rejectionReducer,
    [createScene.rejected]: rejectionReducer,
});

Update

Using the isRejectedWithValue Higher Order Function you can pose the thunk actions into a matcher.

import { isRejectedWithValue } from '@reduxjs/toolkit';

const rejectionReducer = (state, { payload }) => {
  const errorArray = Object.values(payload.message).map(
    (key) => key.message
  );
  state.errors = errorArray;
  state.isOpen = true;
};

const errorsSlice = createSlice({
  name: "error",
  initialState,
  reducers: {
    clearError: (state) => {
      state.errors = null;
      state.isOpen = false;
    },
  },
  extraReducers: builder => {
    builder.addMatcher(
      isRejectedWithValue(createScript, createScene), // <-- thunk actions
      rejectionReducer
    );
  },
});

You are currently defining your extraReducers with "Map Object" notation. You want to use "Builder Callback" notation instead.

With the builder callback you can match single actions using .addCase() but you can also handle multiple actions using .addMatcher(). The first argument of addMatcher() is a function that takes the action and returns a boolean of whether or not it is a match. Here we want to match all actions that end with '/rejected'.

const errorsSlice = createSlice({
  name: "error",
  initialState,
  reducers: {
    clearError: (state) => {
      state.errors = null;
      state.isOpen = false;
    }
  },
  extraReducers: (builder) =>
    builder.addMatcher(
      // matcher function
      (action) => action.type.endsWith("/rejected"),
      // case reducer
      (state, { payload }) => {
        const errorArray = Object.values(payload.message).map(
          (key) => key.message
        );
        state.errors = errorArray;
        state.isOpen = true;
      }
    )
});

You can use my helpers:

import { AnyAction, AsyncThunk } from '@reduxjs/toolkit';

enum AsyncActionStatusesEnum {
  PENDING = 'pending',
  FULFILLED = 'fulfilled',
  REJECTED = 'rejected',
}

//eslint-disable-next-line
type GenericAsyncThunk = AsyncThunk<any, any, any>;
type PendingAction = ReturnType<GenericAsyncThunk[AsyncActionStatusesEnum.PENDING]>;
type FulfilledAction = ReturnType<GenericAsyncThunk[AsyncActionStatusesEnum.FULFILLED]>;
type RejectedAction = ReturnType<GenericAsyncThunk[AsyncActionStatusesEnum.REJECTED]>;

// gets a list of asynchronous actions and checks them for the status of at least one === 'pending'
export function isSomeAsyncActionsPending(matchedActionTypes: GenericAsyncThunk[]) {
  return (action: AnyAction): action is PendingAction =>
    matchedActionTypes
      .map(actionType => `${actionType.typePrefix}/${AsyncActionStatusesEnum.PENDING}`)
      .some(actionType => action.type.endsWith(actionType));
}

// gets a list of asynchronous actions and checks them for the status of at least one === 'fulfilled'
export function isSomeAsyncActionsFulfilled(matchedActionTypes: GenericAsyncThunk[]) {
  return (action: AnyAction): action is FulfilledAction =>
    matchedActionTypes
      .map(actionType => `${actionType.typePrefix}/${AsyncActionStatusesEnum.FULFILLED}`)
      .some(actionType => action.type.endsWith(actionType));
}

// gets a list of asynchronous actions and checks them for the status of at least one === 'rejected'
export function isSomeAsyncActionsRejected(matchedActionTypes: GenericAsyncThunk[]) {
  return (action: AnyAction): action is RejectedAction =>
    matchedActionTypes
      .map(actionType => `${actionType.typePrefix}/${AsyncActionStatusesEnum.REJECTED}`)
      .some(actionType => action.type.endsWith(actionType));
}

example of use:

const fetchCoockBookList = createAsyncThunk(
  'dataSlice/fetchCookBookList',
  async (data: CoockBookParamsType) => await getCoockBook(data)
);

const fetchSeriesList = createAsyncThunk(
  'dataSlice/fetchSeriesList',
  async (data: SeriesParamsType) => await getSeries(data)
);

const isActionsPending = isSomeAsyncActionsPending([
    fetchDataList,
    fetchSeriesList,
]);


const dataSlice = createSlice({
    // name, reducers, initialState, ...

    extraReducers: builder => {
    // others builder addCases, addMatchCases, ...

    builder
        .addMatcher(isActionsPending, state => {
            state.error = null;
            state.isLoading = true;
          })
        // addMatchers for fullfield, rejected
    }
})