Redux-api (b)

Using Redux in React applications

Like Flux, Redux also needs to register a callback function store.subscribe(listener) to get the update of state, and then we'll listener call it inside setState() to update the React component.

Redux officially provides react-redux to simplify the binding between react and Redux, eliminating the need to manually register/unbind callback functions like Flux.

Next look at how it's done, React-redux only two APIs

<Provider>

<Provider>As a container component to accept the store and make the store sub-component available, use the following:

 import {render} from Span class= "hljs-string" > ' react-dom '; import {Provider} from  React-redux '; import App from  './app '; render ( span class= "xml" ><provider store ={store}> <App/> </PROVIDER> document.getElementById (' root ');     

This <Provider> is the only time the child component <App /> can use the connect Method Association store.

<Provider>The implementation is very simple, he took advantage of React a (temporarily) hidden feature Contexts , Context used to pass some of the parent container's properties for all descendant components visible, in some scenarios to avoid the use props of multi-layered components, to learn more about Contexts This article can be consulted.

Connect

connect()This method is slightly more complex, mainly because it is very flexible to use: connect([mapStateToProps], mapDispatchToProps], [mergeProps], [options]) it accepts up to 4 parameters, is optional, and the method call returns another function, which returns a function that takes a component class as an argument, and finally returns a new component associated with the Redux store. , similar to this:

class App extends Component { ... }export default connect()(App);

This allows you to App get to the store in this component props dispatch , but notice that there is App no state change in the Listener store, and you must specify the parameters if you want to listen for status changes in the store mapStateToProps .

First look at its parameters:

• [mapStateToProps(state, [ownProps]): stateProps]: The first optional parameter is a function that only specifies this parameter, the associated (connected) component listens for updates to the Redux Store, and each update invokes mapStateToProps the function, returning a literal object that will be merged into the properties of the component props . ownPropsis the optional second parameter, which is passed to the component, and props when the component gets to the new one props , it ownProps will get the value and execute mapStateToProps the function.
• [mapDispatchProps(dispatch, [ownProps]): dispatchProps]: This function is used to specify how to pass dispatch to the component, and in this function directly dispatch action Creator, return a literal object will be merged into the properties of the component props , so that the associated component can be directly through the props call to action , Redux provides an bindActionCreators() auxiliary function to simplify this notation. If this argument is omitted, it is dispatch passed directly as the default props . ownPropsfunction Ibid.

The remaining two parameters are less used, and a more detailed description is available in the official documentation, which provides a number of simple and clear usage examples to illustrate these parameters.

An example of a specific point

Redux Create Store,action,reducer This part is omitted, here only see the React-redux part.

Import React, {Component}From' React ';Import SomeactioncreatorFrom'./actions/someaction ';Import *As ActioncreatorsFrom'./actions/otheraction ';functionMapstatetoprops (State) {return {propName:state.propName};}functionMapdispatchprops (Dispatch) {return {someaction: (ARG) = Dispatch (Someactioncreator (ARG)), Otheractions:bindactioncreators (Actioncreators, Dispatch)};}class app extends component {render () {//" The fields returned by Mapstatetoprops ' and ' mapdispatchprops ' are ' props ' const {propname, someaction, Otheractions} = this.props; return (<div Span class= "Hljs-attribute" >onclick={someaction.bind (This, ' arg ')} > {propname} </div>);}} export default Connect (Mapstatetoprops, MapDispatchProps) (                 

As mentioned earlier, the connected component must be placed <Provider> inside the container, and the component will be automatically called and updated when the state is changed mapStateToProps mapDispatchProps props . Inside the component can also be props called to the action, if not omitted mapDispatchProps , the component to trigger the action must be manually dispatch, similar to this: this.props.dispatch(someActionCreator(‘arg‘)) .

Redux-api (b)