react the moment is very popular JS framework is designed to uphold the principle react Everything components; react-redux redux is used react bridge tool, react-redux also inherited form design principles react, the components used to provide services.
react-redux user storm drain two core components, respectively, and Provider Connect. Over-react-redux believe that the use of a small partner is not difficult to understand Provider components, in fact, connect nature is also a component that is often said that the HOC components (high-order components), the official introduction to connect is: " connected React assembly Redux Store . "
1, first introduce the use of Provider and connect often scene
(1) Provider using the method shown below, as long as the required components of the store (typically App root component) can be wrapped
1 <Provider store={store}> 2 <App></App> 3 </Provider>
(2) connect to use as follows, showing a higher order function is actually connect, receiving two parameters (as well as optional parameters), it returns a new function, a new function receives as an input a component, and returns the new components. This definition does not react is HOC components do receiving subassembly, returns the new container assembly. It can be seen, connect it is actually a component.
1 connect(mapStateToProps, mapDispatchToProps)(App);
2, the following look at how the Provider and connect to provide services:
(1) Provider component has an attribute store, which receives a user-defined object as js store, state provides to all subcomponents;
(2) connect two receiving component attributes (optional parameter is not considered), mapStateToProps the new state into the store container assembly props, mapDispatchToProps redux sucked into action in a new container assembly props Returns the new component can be used props in. This whole that is using the new components connect components that are returned.
1 <connect mapStateToProps={mapStateToProps} mapDispatchToProps={mapDispatchToProps}> 2 <App></App> 3 </connect>
This scene is not familiar, yes, provider and connect functions are assigned to their own property, will need to be passed to the function of sub-assemblies, subassemblies making also has a corresponding function through; is not that familiar with dependency injection you, the functions required to provide the required components in the form of a third party, thereby decoupling the logic. Students may be more familiar with angular clear, angular module is loaded through the good features will be set in advance injected into the corresponding component, react is also the same, but the component into a form more familiar to serve, change sentence words, and connect Provider are syntactic sugar dependency injection, its essence is achieved by introducing a third party component (i.e., a Provider component here), the desired function is injected into the sub-assembly in the form of property (familiar angular students can make their own brain service usage scenarios). HOC needs nothing more than an original manner, and view the action decoupling logical high order components, thereby realizing multiplexing view.