combine extraReducers with exact same code with redux toolkit

user_13987709 0
Viewed 1822

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 "combine" the 2 to a single extraReducer (at the end it will be much more)?

redux-toolkit reactjs javascript
3 Answers

I don't believe there is a way to combine 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 common 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 compose 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
    );
  },
});
user_86908570

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;
      }
    )
});
user_104315740

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
    }
})
user_128413490
Related