React Redux Toolkit Course For Beginners - How To Build Using Redux

State management is one of the most essential parts of building modern web applications. It helps maintain consistency across the UI and allows different components to share and update the same data. Redux has been a popular choice for state management in React, but it comes with a lot of boilerplate code that can be difficult to manage. Enter Redux Toolkit — a modern and more efficient way of working with Redux.

In this article, we will explore what Redux Toolkit is, why it was created, and how you can use it to manage state in your React applications in a cleaner and more maintainable way.

If you are looking for a video walkthrough, checkout this video:

What is Redux Toolkit?

Redux Toolkit is an official library that simplifies the usage of Redux by providing utilities that reduce boilerplate code and make Redux easier to set up. It was developed to address some of the common issues that developers face when using Redux, such as repetitive patterns and a steep learning curve.

In essence, Redux Toolkit is an abstraction on top of Redux that offers a set of powerful tools to streamline state management.

Why Use Redux Toolkit?

If you’ve used Redux before, you know how verbose the setup can be. Here are a few reasons why Redux Toolkit is so useful:

• 
  Simplified Store Setup: Setting up a Redux store manually involves a lot of configuration. Redux Toolkit’s configureStore method reduces the complexity.


• 
  Automatic Immutability Handling: With Redux Toolkit, you don't need to worry about immutability in reducers, thanks to Immer — an immutability library that allows direct mutation of state.


• 
  Fewer Lines of Code: Redux Toolkit eliminates the need for repetitive boilerplate code like action creators and reducers.


• 
  Better Developer Experience: With built-in debugging tools and enhanced features, Redux Toolkit improves productivity and ease of use.

Getting Started with Redux Toolkit

To get started with Redux Toolkit in a React application, you’ll first need to install it. Open your terminal and run the following command:

npm install @reduxjs/toolkit react-redux

Setting Up the Store

In Redux Toolkit, the process of setting up the store is simplified using the configureStore function. Here's a basic example:

// src/store.js

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

import movieReducer from './movieSlice';



const store = configureStore({

  reducer: {

    movies: movieReducer,

  },

});



export default store;

In this example:

• We import the configureStore function from @reduxjs/toolkit.


• We import a movieReducer that we will create next.


• We pass the movieReducer to configureStore, which will automatically create the store and handle middleware setup like Redux DevTools.

Creating a Slice

A slice in Redux Toolkit is a collection of reducer logic and actions for a specific piece of state. Let’s create a slice for managing a list of movies.

// src/movieSlice.js

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



const initialState = {

  movies: [],

};



const movieSlice = createSlice({

  name: 'movies',

  initialState,

  reducers: {

    addMovie: (state, action) => {

      state.movies.push(action.payload);

    },

    removeMovie: (state, action) => {

      state.movies = state.movies.filter(movie => movie.id !== action.payload);

    }

  }

});



export const { addMovie, removeMovie } = movieSlice.actions;

export default movieSlice.reducer;

In this slice:

• We define an initial state with an empty movies array.


• We create two reducers: addMovie (to add a new movie) and removeMovie (to remove a movie by ID).


• We export the addMovie and removeMovie actions so that they can be dispatched from our React components.

Using Redux State in React Components

Now that we have our store and slice set up, we can use Redux state in our React components using the useSelector and useDispatch hooks provided by the react-redux library.

Here’s how we can manage the movies in a component:

// src/App.js

import React, { useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { addMovie, removeMovie } from './movieSlice';



const App = () => {

  const [movieName, setMovieName] = useState('');

  const dispatch = useDispatch();

  const movies = useSelector((state) => state.movies.movies);



  const handleAddMovie = () => {

    if (movieName) {

      const newMovie = { id: Date.now(), name: movieName };

      dispatch(addMovie(newMovie));

      setMovieName('');

    }

  };



  const handleRemoveMovie = (id) => {

    dispatch(removeMovie(id));

  };



  return (

    <div>

      <h1>Favorite Movies</h1>

      <input

        type="text"

        value={movieName}

        onChange={(e) => setMovieName(e.target.value)}

        placeholder="Enter movie name"

      />

      <button onClick={handleAddMovie}>Add Movie</button>

      <ul>

        {movies.map((movie) => (

          <li key={movie.id}>

            {movie.name}

            <button onClick={() => handleRemoveMovie(movie.id)}>Remove</button>

          </li>

        ))}

      </ul>

    </div>

  );

};



export default App;

Explanation:

• We use useSelector to access the movies array from the Redux state.


• We use useDispatch to dispatch actions, such as addMovie and removeMovie, to modify the Redux state.


• The component allows the user to add and remove movies from the list, which is reflected in the UI.

Benefits of Redux Toolkit

• 
  Less Boilerplate: Redux Toolkit reduces the amount of repetitive code you need to write. No more action creators or manually writing reducers.


• 
  Easy to Use: By using createSlice, Redux Toolkit abstracts away many of the complexities that come with Redux.


• 
  Optimized Performance: Redux Toolkit is built with performance in mind and comes with default optimizations for things like middleware.


• 
  Built-in Debugging: Redux Toolkit includes built-in support for Redux DevTools, making it easier to debug your application’s state.

What now?

Redux Toolkit is a powerful and modern solution to state management in React applications. It simplifies Redux by reducing boilerplate and provides a better developer experience with tools like configureStore, createSlice, and automatic handling of immutability.

By using Redux Toolkit, you can focus more on building your app’s features and less on the complexities of state management. If you're building a React app and need to handle global state, Redux Toolkit is definitely worth considering.

Resources:

• PedroTech Youtube Channel