Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’»

In recent updates to Redux Toolkit, the way we define reducers has evolved. The traditional object notation for createReducer has been replaced by a more flexible and powerful builder callback notation. This change is designed to offer better TypeScrip…


This content originally appeared on DEV Community and was authored by Aditya Singh

In recent updates to Redux Toolkit, the way we define reducers has evolved. The traditional object notation for createReducer has been replaced by a more flexible and powerful builder callback notation. This change is designed to offer better TypeScript support and more control over reducer logic. Let's dive into the difference and see how to upgrade your code.

The Old Way: Object Notation

Previously, we could define our reducers using an object where keys were action types and values were the corresponding reducer functions. Here’s an example:

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

let id = 0;

const tasksReducer = createReducer([], {
  ADD_TASK: (state, action) => {
    state.push({
      id: ++id,
      task: action.payload.task,
      completed: false,
    });
  },
  REMOVE_TASK: (state, action) => {
    const index = state.findIndex((task) => task.id === action.payload.id);
    if (index !== -1) {
      state.splice(index, 1);
    }
  },
  COMPLETE_TASK: (state, action) => {
    const index = state.findIndex((task) => task.id === action.payload.id);
    if (index !== -1) {
      state[index].completed = true;
    }
  },
});

export default tasksReducer;

The New Way: Builder Callback Notation

With the new builder callback notation, we define reducers using a builder pattern. This approach provides a more structured and scalable way to handle actions, especially in larger applications.

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

let id = 0;

const tasksReducer = createReducer([], (builder) => {
  builder
    .addCase('ADD_TASK', (state, action) => {
      state.push({
        id: ++id,
        task: action.payload.task,
        completed: false,
      });
    })
    .addCase('REMOVE_TASK', (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      if (index !== -1) {
        state.splice(index, 1);
      }
    })
    .addCase('COMPLETE_TASK', (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      if (index !== -1) {
        state[index].completed = true;
      }
    });
});

export default tasksReducer;


This content originally appeared on DEV Community and was authored by Aditya Singh


Print Share Comment Cite Upload Translate Updates
APA

Aditya Singh | Sciencx (2024-06-17T22:19:27+00:00) Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’». Retrieved from https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/

MLA
" » Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’»." Aditya Singh | Sciencx - Monday June 17, 2024, https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/
HARVARD
Aditya Singh | Sciencx Monday June 17, 2024 » Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’»., viewed ,<https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/>
VANCOUVER
Aditya Singh | Sciencx - » Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’». [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/
CHICAGO
" » Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’»." Aditya Singh | Sciencx - Accessed . https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/
IEEE
" » Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’»." Aditya Singh | Sciencx [Online]. Available: https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/. [Accessed: ]
rf:citation
» Latest Redux Toolkit: Using the Builder Callback Notation in createReducer đź’» | Aditya Singh | Sciencx | https://www.scien.cx/2024/06/17/latest-redux-toolkit-using-the-builder-callback-notation-in-createreducer-%f0%9f%92%bb/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.