<h3 id="introduction">Introduction</h3>
<p>As an app grows in size, the amount of data that the app uses typically also increases in size. Making sure that data stored in different components is always in sync is a challenging task that can lead to difficult-to-track bugs.</p>
<blockquote>
<p>State management is the solution to that problem.</p>
</blockquote>
<p>Managing state is difficult to handle for any application, and is seldom done manually. This is why so many state management libraries are available, with more appearing frequently.</p>
<blockquote>
<p>State management in React is a very large topic, and in this guide, we will dig deep into how to utilize a popular third-party library called <strong>Redux</strong>, for state management in a React application.</p>
</blockquote>

            <div class="alert alert-note">
                <div class="flex">
                    
                        <div class="flex-shrink-0 mr-3">
                            <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
                        </div>
                        
                    <div class="w-full">
            <p><strong>Note:</strong> If you’re coming from a Vue background, then you've likely used <em>Vuex</em> before, in which case, a lot of the Redux concepts will end up being familiar to you. The main difference between Vuex and Redux is that Vuex mutates the store state, whereas Redux creates a new store state on every update.</p>

                    </div>
                </div>
            </div>
            <h3 id="understandingstate">Understanding State</h3>
<blockquote>
<p>What is state management, and what does &quot;state&quot; refer to?</p>
</blockquote>
<p>When you Google the term &quot;state&quot; - you could get lost as the word is used to describe so many distinct concepts in different facets of engineering.</p>

David Landup

Uchechukwu Azubuko

Introduction to State Management with React

<p>At this point, you’ve learned about the important basics of Redux and how it can be used in a React application, but the more complex the project becomes, the more complex it also gets when using Redux. Now, the good thing is that there is a slightly easier way of using Redux.</p>
<p>Henceforth, we will dive into an approach that is a bit easier to set up and maintain.</p>
<p>Before that though, it would be ideal to identify a couple of problems that we could face if our React application would continue to grow, that is if we manage more and more state with Redux:</p>
<ul>
<li>
<p>One potential issue may be the action types. While dispatching actions, it becomes so important to avoid typographical errors while working with the identifiers, otherwise, the action would not be handled by the reducer or won’t be handled correctly. While that didn’t seem to be a problem in a small app like the counter app, it could be a problem in a bigger application with a lot of developers working on the app simultaneously; and with a lot of different actions, an identifier could easily me mistyped or clashing with another. Thus, a way to possibly define identifiers once and keep reusing them would be nice.</p>
</li>
<li>
<p>Another potential problem is the amount of data that is managed in the reducer. The more data, the more the different pieces of state in the app, thus, the bigger the state objects get, which also means that the reducer function would keep getting longer and longer.</p>
</li>
<li>
<p>Another problem is the case of state immutability which is to be respected. There is a need to ensure that a brand-new state snapshot is always returned and that the existing state is not accidentally changed directly from anywhere.</p>
</li>
</ul>

Redux Toolkit in Action

<p>We are now going to dive into the very popular Redux library and understand exactly how it is so important for statement management in a React application, through a demo. We are also going to explore a related library called Redux Toolkit, which simplifies working with Redux, as you will see.</p>
<h4 id="whatisredux">What is Redux?</h4>
<p>Redux is a state management system for cross-component or application-wide state; to help React developers manage state across multiple components or even the complete app. Earlier in this guide, we saw how we could manage a simple React state with the <code>useState()</code>. There are other hooks that can be helpful for the same too, including the <code>useReducer()</code>. While these hooks exist to allow for the management of data that typically changes so that the UI is updated, they are best suitable for managing local state or cross-component state.</p>
<blockquote>
<p>Local state is state that belongs to a single component and should be managed with <code>useState()</code> or <code>useReducer()</code> e.g. listening to a user input field or toggling a “show more” details accordion.</p>
</blockquote>
<blockquote>
<p>Cross-component state is state that affects multiple components and requires prop drilling e.g. opening and closing a modal overlay.</p>
</blockquote>
<blockquote>
<p>App-wide state is state that affects the entire app (most or all of an application’s components) e.g. the status of user authentication.</p>
</blockquote>

 State Management in React using Redux

<p>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.</p>
<p>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 <em>Product A</em> (5 left in stock) before starting work, and commenced calling clients.</p>
<p>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.</p>
<p>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 <strong><em>state</em></strong>. However, the problem was, their states <em>became out of sync</em> and were not corresponding.</p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p>
<p>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.</p>
