react-redux design ideas and concepts introduced
1, react-redux all components into two categories UI components (UI responsible for the presentation) and container components (responsible for managing the data and logic).
2, UI component characteristics
- UI is only responsible for the presentation, without any business logic
- No state (ie without using this.state this variable), Note: Use the react-redux recommended components with function declaration, rather than a class declaration.
- All data by parameters (this.props) provided
- Do not use any of the API Redux
- Because the free state, UI components, also known as "pure component", that is, it functions like a pure, pure determine his value by the parameter.
3, container assembly (corresponding to the parent element comprising subassembly), the container assembly comprising UI components
- Responsible for the management of data and business logic, UI is not responsible for rendering
- With internal state
- Redux use the API
Binding assembly and the container assembly 4.UI
- If a UI component both have business logic, then it is split into two layers: the outer container is a component, which is a UI component. The former is responsible for communication with the outside of the data to the latter, rendering the latter view.
- react-redux specified, all of the UI components provided by the user, the container assembly is automatically generated by the react-redux.
5, react-redux API Several concepts:
- react-redux the connect () for generating the UI components from the container assembly
- There are two common connect parameters: mapStateToProps () mapDispatchToProps ()
- mapStateToProps is a function. Its role is to establish a mapping relationship between the objects from the outside props State (i.e., in the data store) the object to the UI components. After the implementation of the return of an object, in which each key-value pair is a map; mapStateToProps subscribe (binding) store, whenever the (store) state update is performed automatically recalculate the parameters of UI components, thereby triggering re-render UI component; mapStateToProps first parameter is always an object state, the second parameter may also be used, representative of props object container assembly. After using ownProps as a parameter, if the parameter container assembly changes, it will lead to re-render the UI components
- If you omit mapStateToProps connect method parameters, then the UI components will not subscribe store, that is to say store updates do not cause update UI components.
- mapDispatchToProps a connect function of the second parameter, the parameters used to create the UI component store.dispatch mapping method (distribution business logic), that is, it defines which users should operate as the Action, pass Store, he may be a function may be an object; if mapDispatchToProps is a function, and will be dispatch ownProps (props object container assembly) two parameters, must return an object, each key-value pair is a mapping of the object , defines the parameters of how the UI component emitted action; if mapDispatchToProps is an object that corresponds to each key is the same name as the name of the UI component parameters, a parameter value should be, as will be Creator action, it will be returned by the action redux automatically issued
6, after the react-redux <Provider> connect assembly method of generating container assembly, the container assembly need to get the state object in order to generate parameter UI components. One solution is to state the object as a parameter passed in the container assembly. But in a deep container components may be level, a state level will pass on very troublesome.
Give this react-redux Provider component that allows the container to get the state assembly, the outside layer of the root Package Provider, all subcomponents of the App can get a state, it is the principle of context attribute React components, store in the above context object context. Code react-redux container assembly is automatically generated, so that it is similar to the following, and then sub-assembly from the store can get a context
<Provider store={store}>
<App />
<Provider>
7. Summing up the above description: react-redux idea is to UI components and business logic to be separated from management and state