Getting Started with Redux and Redux Toolkit: Exploring Syntax Differences (for Beginners)

Introduction

In this article, I would like to briefly summarize the differences between Redux Toolkit and regular Redux, to make it beneficial for Redux learners. I am also a beginner learning Redux, so my sentences may not be perfect. I would appreciate it if you could bear that in mind while reading.

What is Redux | Redux Toolkit?

Redux is a popular state management library for JS applications, commonly used with frameworks like React.

Redux Toolkit is a set of tools to simplify Redux development - "Simplfy" means, your codes are less and easier to manage while you use Redux Toolkit instead regular Redux.

Let's see code comparison.

Comparison

// Regular Redux //

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// actions

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

// reducer

const initialState = 0;

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

export default myReducer;

// store

const store = Redux.createStore(myReducer);

This is a super basic Redux example, Counter App. Probably you've already seen similar example codes from other resources.

In this Redux examples, I define the action type, initial state and update the state based on each action type within the reducer function (The action creator is also defined as a function to return action objects).

// Redux Toolkit //

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

const mySlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment(state) {
      return state + 1;
    },
    decrement(state) {
      return state - 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default mySlice.reducer;

In Redux Toolkit examples, I create a slice using the createSlice method from Redux Toolkit. The slice contains a name, initial state, and reducers. Within the reducers, state updates are performed.

Redux Toolkit uses createSlice to simplify the definition of action types, action creators, and writing reducer functions.

As you can see, Toolkit's syntax is more concise and less codes. The syntax in Redux Toolkit allows for shorter and cleaner code, making it more readable. However, for people who are not familiar with the basics of Redux, they may actually find plain Redux more visually appealing - this can make it more challenging for beginners to understand the core concepts. In such cases, plain Redux might be perceived as easier to comprehend.

Overall

Redux Toolkit is generally considered simpler, more manageable, and superior in many situations. However, depending on the user's work environment and specific circumstances, both Redux and Redux Toolkit can be viable options. It's crucial to learn how to use them effectively and choose the appropriate tool based on your needs.

Thank you for reading, happy coding:)