Introduction
In the previous series, we have learned about the basic concept of React and React Hooks. Now, we will learn about what is Redux, why it is required in React and, how it is used.
What is Redux?
Redux is a predictable state container for JavaScript apps. So, React is a state management library and architecture which can be easily integrated with React. It is not compulsory to use React with Redux. Redux can also be integrated with Angular, Ember, Vue or Vanilla JavaScript. Redux is a library for JavaScript applications which follows the unidirectional flow and it is having a single store.
Redux cannot have multiple stores as stores are divided into various state objects. So for that, we just need to maintain a single store or a single source of truth which is accessible to the entire application.
Redux goes beyond the local state of the component. We can maintain global state using Redux which need not be passed to every child component. Redux allows handling all your states in the place where it is accessible to all the child components and while using the state to child components this keyword is not required.
There are 3 basic principles of Redux,
- Single Source of truth
The Single source of truth here refers to that the state of a single piece of code will be stored and get from a single source. There can be multiple pieces of code but each code will have a single source of state.
- The state is read-only
The state can only be changed by triggering an action. Action is nothing but a plain Js object that describes the change. Just like the state is a small representation of object and in the same way, the action is a small representation of change to that data.
- Changes are made with pure functions
In order to specify how the state tree is transformed by actions, pure functions are needed. Pure functions are those whose return value depends completely on the values of their arguments.
Basically, Redux is a state container which maintains all the state of an application. The state is represented by all the individual components of that application which include data and UI of that application. So, we can say that Redux will store and maintain application state. In Redux, all state transitions are explicit and can be keep tracked.
Here we may have some questions:
Q 1. What is Single source of truth?
Single source of truth does not mean that it should come from a single place. Instead, it means that your single state should come from a single source. i.e.) A single piece of state should have a single source. In our application, we can have multiple pieces of code and each code is having its own single piece of source.
Q 2. Why Redux should be used in your application?
Redux provides the component to maintain its own state.
Q 3. Why it is required Redux to maintain state even though React is providing state management as well?
As we know that React provides management of state within the component. Though in some case if we want to pass some state from parent component to child component to more levels down than we need to pass it from each component in the hierarchy. But while using Redux it provides management of state outside the component which makes it efficient and will be used directly by the component that required it without having to pass in multiple hierarchies.
Q 4. When Redux should be used.
Redux is useful when a component,
- Uses I/O like network or device APIs.
- Saves or load state.
- Shares its state with any component whether it is a child or not.
- Needs to deal with any data logic or business processing to share with other parts of our application.
React and Redux
As we know, React is a UI library while Redux is a state management library. They can work independently. So, to combine them both we have React-Redux package which is provided by the official Redux binding UI library.
React-Redux provides many functions that help to communicate React with Redux. So whenever using React with Redux in the application Redux UI binding library should be used for it to function effectively.
Summary
In this article, we have learned about what is Redux, its advantage, usage, and its principles. We also have seen how Redux can be used with React. Now in the next article, we will start with Redux and how it is used. First, we will see how we can use Redux as a standalone application along with its core concepts before starting to use it with React.