React State Management with Redux and Redux-Toolkit

Coordinating state and keeping components in sync can be tricky. If components rely on the same data but do not communicate with each other when that data changes, an application can end up with bugs.

Let’s use a real-world example to illustrate this. Jane and John Doe work in the sales department of a paper company. Each checked the stock of Product A (5 left in stock) before starting work, and commenced calling clients.

Jane sells 4 units and John sells 1. Jane thinks there's one unit left to sell, while John thinks there's 4. Both are wrong, until they meet up and sync the numbers.

The issue here is that Jane and John both had different values for the number of books in stock in their heads. They both had their own state. However, the problem was, their states became out of sync and were not corresponding.

This can happen in a React application when two components have their own state for the same data or process. Changes to a state in one component might not change the value of a related state in another component—either because there is a bug or perhaps, a developer forgot to write the code to keep all data in sync.

One solution for Jane and John is to use a computer to track how many books are in stock (read data from a central repository) or manually update each other whenever a sale is made. When either of them makes a sale, they can enter the record into the computer, and the computer deducts one from the total number of unsold books remaining. Now, when any customer asks Jane if she can buy a book, Jane can check the computer system that keeps hold of the entire record and be sure there is a book left to sell before she takes a payment.

In a React application, Redux manages the state of the number of products in this illustration. It’s a central source of truth that stores the state the application uses to render.

In a React application, components get data from a Redux store. When the components need to make an update to the state, they make changes to the state in the store, which causes all other components that depend on the data to rerender with the new data. By using a Redux store, the problem of data getting out of sync between components can be avoided.

In this Guided Project - we'll be taking a look at Redux and the Redux Toolkit, and how they can make state management easy, scalable and robust while building React applications.

Turn Theory Into Practice

All great learning resources, books and courses teach you the holistic basics, or even intermediate concepts, and advise you to practice after that. As soon as you boot up your own project - the environment suddenly isn't as pristine as in the courses and books! Things go wrong, and it's oftentimes hard to pinpoint even why they do go wrong.

StackAbuse Guided Projects are there to bridge the gap between theory and actual work. We'll respect your knowledge and intelligence, and assume you know the theory. Time to put it into practice.

When applicable, Guided Projects come with downloadable, reusable scripts that you can refer back to whenever required in your new day-to-day work.