You can use Redux as the React state manager. What is Redux? How do you use it? I need to know better

Why does React need a state management library like Redux

To facilitate communication between components

The React component has two important properties called props and state, which are essentially JavaScript objects. The props properties are read-only, and they are always passed from parent to child throughout the application. A child component can never send a prop back to its parent. The state property is used to maintain component internal data. This property is private and fully controlled by the current component.

  • This. state to get the state object
  • This.setstate () updates the state object when the UI needs to be dynamically updated for user actions, network responses, or other changes.

In React, it is easy for parent components to communicate with child components, but communication between grandparent components, child components to parent components, and brother components is more difficult. Communication needs to be passed layer by layer through props or callback layer by layer from bottom to top. If the layer is too deep, it is difficult to implement. In actual large-scale applications, these scenarios are unavoidable, so Redux is needed to solve this problem.

So how does Redux solve this? In simple terms, the state of the entire application is stored in an object called Store. So that the entire state of the application is stored in one place. Any component can directly access it and change it, but changing state also requires following certain constraints to make the state change predictable. When the state of the data changes, the place where the data is used is also notified.

Therefore, with Redux as the state manager, communication between components is very convenient. State information from the grandparent to the grandchild no longer needs to be passed through the parent. Similarly, the grandchild component does not need to call the parent component’s callback function to pass data to the grandparent.

Redux basics

Redux official documentation

What is the story

Redux is a front-end development library that is a predictable state container for JavaScript programs and is used for state management of the entire application. Provides the most simplified API to achieve fully predictable behavior. Redux makes applications easy to test, run in different environments, and display consistent behavior.

There is no relationship between Redux and React. Redux works well with React. In addition, Redux supports React, Angular, Ember, jQuery, and even pure JavaScript.

Redux follows three principles

Redux does not allow programs to modify data directly, but instead describes the changes with a generic object called “Action.”

  • Single data source The data state of the entire application is stored in an object called Store. So that the entire state of the application is stored in one place. A single state tree makes it easier to track changes over time and debug or examine applications.

  • You can’t change state directly like you can with this.setstate () in React. The only way to change state is to trigger an action. Actions are ordinary JS objects that describe changes. This operation is a minimal representation of changes to the data.

  • To specify how the state tree is transformed by operations, you need to use pure functions to ensure consistency in the results. Each time the same action action is performed on the same state, the resulting new state must be the same.

Redux core concepts

Redux is based on three principles, the core concepts are:

  • Store – The state/object tree of the entire program is stored in store.
  • Action – This is an object that describes what happened.
  • Reducer – This is the place to determine how the state will change.
  • Dispatch – Triggers actions and maps the actions to the reducer.
  • ApplyMiddleware – This is the extension point after an action has been initiated and before it reaches the Reducer.
  • View – UI for displaying status information.

store

Practice of Principle 1

All states in an application are stored in a single store as a tree of objects.

action

Practice of Principle 2

The only way to change state is to trigger an action, an object that describes what happens. It’s basically a normal JavaScript object. The convention in Redux is that an action must use a type field of type string to indicate the action to be performed. In most cases, type is defined as a string constant.

The advantage of forcing action to describe all changes is that it is clear what is happening in the application. If something changes, you can see why. Actions are like indicators of what’s going on.

reducer

Practice of Principle 3

To string actions and states together, develop some functions, known as reducer. Reducer is just a pure function that receives the previous state and action and returns the new state.

Reducer is a pure function and must be kept pure. As long as the arguments passed in are the same, the next state returned must be the same. No special cases, no side effects, no API requests, no variable changes, just perform calculations.

Reducer is a pure function. It is only used to calculate the next state. It should be completely predictable. Passing the same input multiple times must produce the same output.

Dispatch

Practice of Principle 2

Dispatch issues actions to call the Reducer method to change the data.

applyMiddleware

Middleware functions are used to extend (or process) the store.dispatch function. It provides extension points after the action is initiated and before the reducer arrives. You can use Redux Middleware for logging, creating crash reports, calling asynchronous interfaces, routing, and more.

The resources

Why does React need a state management library like Redux