Easy to understand Redux (know)

1.React has props and state:props means that the parent distributes the attributes "the state of the parent component is passed to the subcomponent subassembly using props to get"State means that the component can be managed internally, and the entireReact does not have the ability to retrace data upward, which means that the data can only be distributed in one direction or in its own internal digestion.
Understand this is to understand react andThe premise of Redux.
2. The built-in react component may be a complete application, it works well, and you can control it by using attributes as an API. But more time to findreact can't get two components to communicate with one another ., use each other's data.
And then not through the DOM communication (i.e. within the react system)the only solution is to elevate the state, place the state in a common parent component to manage it, and then distribute it back as a props to the child component.
3.the way a subassembly changes the state of a parent component can only be a callback that triggers the parent component through the onclick, that is, the parent component declares the function or method in advance as a contract to describe how its own state will change, and then it is used as a property to the child component as well.
There is a pattern: the data is always one-way down from the top, but only the subassembly callbacks conceptually return to the state's top-level impact data. In this way, the state is responsive to some extent.
4. In order to face all possible scaling issues, the easiest way to do this is to centralize all the state to the top of all components and distribute it to all components.
5. For better state management, a library is required to be distributed to all react applications as a more professional top-level state, which isRedux. Let's come back and see the need to reproduce the structure:
A. Require callback to notify State (equivalent to callback parameter), action
B. Needs to be handled based on callback (equivalent to parent method) reducer
C. Store with state (equivalent to total status)
For redux, there are only three elements:
A. Action is a purely declarative data structure that provides only all the elements of an event and does not provide logic.
B. Reducer is a matching function, the action's send is global: All reducer can be captured and matched to their own or not, related to take away the elements in the action of logic processing, modify the state in the store, not related to the status of the process is not returned.
C. Store is responsible for storing state and can be react API callback, release action.
Of course, there is no direct use of two libraries, there is a binding called React-redux, providing a provider and connect. Many people actually read the Redux card here.
A. Provider is an ordinary component that can be used as a distribution point for the top-level app, which requires only the store property. It distributes the state to all the components that are connect, regardless of where it is, how many layers are nested.
B. Connect is the real focus, it is a branch of the function, meaning that the first to accept two parameters (Data binding mapstatetoprops and event binding Mapdispatchtoprops), and then accept a parameter (the component itself that will be bound):
Mapstatetoprops: When building a redux system, it will be initialized automatically, but your react component does not know it exists, so you need to sort out the Redux state you need, so you need to bind a function that has its parameters Simply return several values that you care about.
Mapdispatchtoprops: A declared action as a callback, or can be injected into the component, that is, through this function, its parameters are dispatch, By redux the helper method Bindactioncreator bind all action and the dispatch of the parameter, it can be used as a function in the component as an attribute, without the need of manual dispatch. This mapdispatchtoprops is optional, and if you do not pass this parameter redux will simply inject dispatch as an attribute to the component, which can be used manually as Store.dispatch. This is why we need to be a part of the department.

Do the above process redux and react can work. To put it simply:
1. Top-level distribution status, so that react components are rendered passively.
2. Listen for events, the event has the right to return to the top level of all States affected State. Comes with some basic concepts of Redux:

1. The core of Redux is a store.
2. The store is a JavaScript object created by the CreateStore (reducers) method provided by Redux.
3. The store has two core methods:. GetState () and. Dispatch ().
4. . GetState () returns a JavaScript object that represents the current state of the store.
5. . Dispatch () takes an action as a parameter and distributes the action to all reducer that have subscribed to the update.
6. An action is a JavaScript object that typically contains fields such as type, payload, and so on that describe the event and related information (using the Redux middleware allows you to dispatch other types of actions, not expanded here).
7. Reducer is a JavaScript function with a function signature (previousstate, action) and NewState, which is to accept the Previousstate and action two parameters, depending on the information carried in the action P The reviousstate makes the appropriate processing and returns a new state.

Easy to understand Redux (know)