React State Management with Redux and Redux-Toolkit - State Management in React using Redux

State Management in React using Redux

David Landup
Uchechukwu Azubuko

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.

What is Redux?

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 useState(). There are other hooks that can be helpful for the same too, including the useReducer(). 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.

Local state is state that belongs to a single component and should be managed with useState() or useReducer() e.g. listening to a user input field or toggling a “show more” details accordion.

Cross-component state is state that affects multiple components and requires prop drilling e.g. opening and closing a modal overlay.

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.

Start project to continue
Lessson 3/3
You must first start the project before tracking progress.
Mark completed

© 2013-2023 Stack Abuse. All rights reserved.

DisclosurePrivacyTerms