I'm looking to streamline my code by creating shared functionality across multiple reducers with the help of create

Question

I'm looking to streamline my code by creating shared functionality across multiple reducers with the help of create

Previously, in the older way of using Redux, we could create a reducer like this - handling different action types but with the same action:

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem("xts0");
      return {
        ...state,
        token: null,
        user: null,
        isAuthenticated: false,
        isLoading: false,
      };
    default:
      return state;
  }
}

Now, how can I achieve the same functionality using the createSlice utility?

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError(state, action){},
    loginFail(state, action){},
    and so on
  }
})

javascript redux redux-toolkit

Answer 1

Answer №1

To simplify the state update logic, you can create a single reducer function.

const resetAuth = (state, action) => {
  localStorage.removeItem("xts0");
  return initialState;
};

If actions from the `authSlice` require the same state update logic, you can use the `resetAuth` reducer function for each action:

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError: resetAuth,
    loginFail: resetAuth,
    // ... and so on
  },
});

If these actions already exist and need to be handled by the `authSlice`, utilize the `extraReducers` property to define additional reducer cases for external actions:

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addCase(authError, resetAuth)
      .addCase(loginFail, resetAuth)
      // ... and so on
  },
});

In the scenario where the actions are not Redux-Toolkit actions but legacy Redux actions, specify the `type` property in the case declaration, e.g.,

.addCase(authError.type, resetAuth)

.

For code optimization, consider using a Matcher to reduce redundancy and boilerplate code:

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

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addMatcher(isAnyOf(authError, loginFail, /* ... and so on */), resetAuth);
  },
});

Answer 2

To simplify the state update logic, you can create a single reducer function.

const resetAuth = (state, action) => {
  localStorage.removeItem("xts0");
  return initialState;
};

If actions from the `authSlice` require the same state update logic, you can use the `resetAuth` reducer function for each action:

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError: resetAuth,
    loginFail: resetAuth,
    // ... and so on
  },
});

If these actions already exist and need to be handled by the `authSlice`, utilize the `extraReducers` property to define additional reducer cases for external actions:

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addCase(authError, resetAuth)
      .addCase(loginFail, resetAuth)
      // ... and so on
  },
});

In the scenario where the actions are not Redux-Toolkit actions but legacy Redux actions, specify the `type` property in the case declaration, e.g.,

.addCase(authError.type, resetAuth)

.

For code optimization, consider using a Matcher to reduce redundancy and boilerplate code:

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

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addMatcher(isAnyOf(authError, loginFail, /* ... and so on */), resetAuth);
  },
});

I'm looking to streamline my code by creating shared functionality across multiple reducers with the help of create

Answer №1

Similar questions

The simultaneous use of trackball controls and GUI is not compatible

Ensuring a correct dismount of a React component

Retrieve the chosen item along with its quantity

Error in Typescript syntax within a CommonJS/Node module: Unexpected colon token found in function parameter

Determining if a component is nested within itself in Angular 6 is a crucial task

An Overview of Implementing Ajax Calls for Partial Views on Form Submission

Struggling to perform a basic http GET request in Angular 2

The ngModel directive automatically clears the checkbox's Checked status

Sending information from a Vuex module to a component following an axios request

Tips for enforcing validation rules at the class level using Angular's version of jQuery Validate

By implementing Async.parallel, I ensure that the lifetime of my parameter does not exceed the duration of the asynchronous calls in NodeJS when working with MongoDB

Encountering difficulty in assigning the desired value to the select box

Clicking on the parent page prevents the hyperlink inside the iframe from working as expected

"What is the best approach for setting up an Azure Web App to host both an Express static site and API

What steps can be taken to ensure that the v-model input is not updated?

What could be causing my node server's REST endpoints to not function properly?

Why is there a CSS reference failure in Express and how can it be resolved?

What is the optimal frequency for saving data when dealing with a particularly extensive form?

Is it possible to send multiple HTML input values to a Google Spreadsheet using only JavaScript?

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue