State Management in React using Redux
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
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.