State management is one of the most important concepts of react. Because of React’s popularity in recent times there are many state management libraries that have evolved. Redux is one of them. Redux provides an easy way to communicate between components. It provides easy debugging and a centralized store where we can manage all states of our application.
State management is one of the most key concepts in react. It is a way to communicate and share data among the components. If a user changes any state by interacting with the user interface then the UI will get updated from old state to new state.
React follows one-way data binding i.e. if any change is made in a component then data gets reflected in view. We can pass the parent component’s state to the child component by using props. But sometimes it becomes tricky when we need to share data from child component to parent component or if we want to share between sibling components. To resolve these hurdles there are many state management libraries available, one of them is redux.
Redux is a popular state management library that can be used with any framework. It provides a global store that contains all states of application. It is a “Single Source of Truth” which makes state management and debugging easy. In general applications, states are stored in different components of application but redux provides you a global store to manage all states of application.
The data of builtwith shows the exact data of react-redux.
Add required dependencies in your package.json file:
npm i react-redux
npm i redux
There is a global store that contains all states of application. Each component of the application has access to the global store.
The main working of react-redux depends on three building blocks:
Create a folder named redux inside that create two more folders named as actions and reducers and create a file named as store.ts
Store: Store is a single source of truth that has entire states of application.
Here we are creating a counter app which will have two actions INCREMENT and DECREMENT. So we have created two actions in counterAction.tsx file:
Reducers: Reducers are functions that take the current state of an application and then perform any action on that and returns a new updated state.
At last we will create two buttons, one for increment and another one for decrement, where we will use dispatch() method to send our actions.
Redux is a very useful tool for state management in larger and complex applications. Redux provides a global store which is helpful in managing all states of an application. It makes debugging easy. Redux works with any of the UI layers which makes it different from other state management tools. If a user has a large application which needs complex state management then he/she can use redux.
When you have too many number of states that are needed in many places then redux can be used.
Redux can be used with any of framework. It is most commonly used with React and React Native but can be used with Angular, Vue.js and many more.
It’s not necessary. It is recommended to use when you have too many states in an application that needs to interact with different components of the application. It makes debugging easy.