React+Redux containers React+Redux containers React+Redux containers

Now I write a simple login function as a tutorial to help better understand the above flow chart!

The React scaffolding starts with index.js.

Take a look at app.js, where the App component is the component in the flowchart

Now, let’s write action.js

Now, how does the store connect to the action? Now go to compile reducer.js

Now add reducer to the store tree and start writing store.js

Now that the React login is complete, let’s take a look at how React works:

When the user goes to the React login page and does not click the login button, the console prints this.props. IsLogin as the default value initialized in store, which is undefined.

When the login button is clicked, the this.props. Login event is triggered, which is passed to the store tree and returned to mapStateToProps to trigger the action request, and then the server sends data dispatch to the Reducer.

Because the reducer of the login function is combined by combineReducers, the reducer of the store tree starts logging in to the reducer to update the data in the initState of the store tree. The store tree is then passed back to the mapStateToProps, and this.props. IsLogin is changed to the server.

If there is any mistake, welcome to point out.