What is the working process of Redux?

First, let’s look at the next core concept:

1. Store: The place where data is stored. You can think of it as a container, and the entire application can only have one Store.
2. State: The Store object contains all the data. If you want to get the data at a certain point in time, you have to create a snapshot of the Store. The collection of data at this point in time is called State.
3. Action: Changes in State will cause changes in View. However, the user cannot touch the State, only the View. Therefore, the change of State must be caused by View. Action is a notification sent by View, indicating that the State should change.
4. Action Creator: There will be as many actions as there are as many types of messages as the View sends. It would be very troublesome to write it all by hand, so we define a function to create an Action, this function is called Action Creator.
5. Reducer: After the Store receives the Action, it must give a new State, so that the View will change. The calculation process of this State is called Reducer. Reducer is a function, it accepts Action and current State as parameters, and returns a new State.
6. Dispatch: It is the only way for View to send Action.

Then we go through the entire work process:

1. First, the user sends an Action (via View), and the dispatch method is used in the dispatch method.
2. Then, the Store automatically invokes the Reducer and passes two parameters: the current state and the received Action, the Reducer will return the new State.
3. Whenever the State changes, the Store will call the listener function to update the View.

At this point, the user interaction process ends. It can be seen that data flows in one direction throughout the entire process, which ensures the clarity of the process.