From Redux Core to Redux Tool Kit

If you’re a Redux developer, you may have heard about the new Redux Toolkit (RTK) package, which was released in October 2019. RTK is a new approach to Redux development that makes it easier and faster to write Redux applications. In this article, we’ll take a look at how to transition from using Redux core to using Redux Toolkit, and we’ll provide some examples to illustrate the differences between the two approaches.

First, let’s define what we mean by “Redux core” and “Redux Toolkit”. Redux core refers to the basic Redux library, which includes functions like createStore, combineReducers, and applyMiddleware. These functions provide the core building blocks for building Redux applications, but they can be somewhat low-level and require a lot of boilerplate code to use.

Redux Toolkit, on the other hand, is a new package that provides a higher-level set of APIs for working with Redux. RTK includes several utilities that make it easier to write Redux applications, including a createReducer function for defining reducers, a createAction function for creating action creators, and a configureStore function for configuring a Redux store. RTK also includes several other utilities, like middleware for handling asynchronous actions, and support for TypeScript and Immer.

To transition from using Redux core to using Redux Toolkit, you will need to make a few changes to your code. Here are the steps you should follow:

1. Install the Redux Toolkit package by running npm install @reduxjs/toolkit (or yarn add @reduxjs/toolkit if you're using Yarn) in your terminal.
2. Import the configureStore function from Redux Toolkit, and use it to configure your Redux store. This will replace the createStore function from Redux core. Here's an example:

// Before (using Redux core):
import { createStore } from 'redux';

const store = createStore(rootReducer);

// After (using Redux Toolkit):
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer
});

3. Update your reducers to use the createReducer function from Redux Toolkit. This function makes it easier to define reducers by automatically handling switch statements and by providing support for Immer. Here's an example:

// Before (using Redux core):
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};

// After (using Redux Toolkit):
import { createReducer } from '@reduxjs/toolkit';

const todosReducer = createReducer([], {
  ADD_TODO: (state, action) => {
    state.push({
      id: action.id,
      text: action.text,
      completed: false
    });
  },
  default: (state) => {
    // Return the current state if no actions are matched
    return state;
  }
});