React-redux Mapstatetoprops,mapdispatchtoprops How to use

Source: Internet
Author: User

Tags: Best practices prope parameter is your options ROP using render Javascrip

Use React-redux first in the outermost container, wrap all the content in the Provider component, and pass the previously created store as prop to Provider. Const APP = () = {return (<provider store={store}> <Comp/> </Provider>)}; Any component within the Provider (for example, Comp here), if you need to use the data in state, you must be the "connect" component-the product of the "component (MyComp)" that you write with the Connect method. Class MyComp extends Component {//content ...} Const COMP = connect (... args) (mycomp); visible, the Connect method is the most serious. Connect explain exactly what the Connect method did, and we'll find out. First take a look at the signature of the function: Connect ([Mapstatetoprops], [Mapdispatchtoprops], [Mergeprops], [options]) connect () receives four parameters, respectively Mapstatetoprops, Mapdispatchtoprops, Mergeprops and options. Mapstatetoprops (State, Ownprops): Stateprops This function allows us to bind the data in the store as props to the component. Const MAPSTATETOPROPS = (state) = {return {Count:state.count}} The first parameter of this function is the store of Redux, where we extract the Count property. Because the object with the Count property is returned, MyComp will be named the props field of count. Class MyComp extends Component {render () {return <div> count: {this.props.count} times </div>}}const Comp = Connec T (.... args) (MyComp); Of course, you do not have to pass the data in the state intact to the component, you can dynamically output the required (minimum) properties of the component according to the data in the state. Const MAPSTATETOPROPS = (state) = + {return {GreaterThanFive:state.count > 5}} The second parameter of the function Ownprops, is MyComp own The props. Sometimes, Ownprops can also have an effect on it. For example, when you maintain a list of users in the store, your component MyComp only cares about one user (as shown by the userId in props). Const MAPSTATETOPROPS = (state, ownprops) + = {//state is {userlist: [{id:0, Name: ' King two '}]} return {User: _.find ( State.userlist, {id:ownProps.userId})}}class MyComp extends Component {static proptypes = {UserId:PropTypes.st    Ring.isrequired, user:PropTypes.object}; Render () {return <div> user name:{this.props.user.name}</div>}}const Comp = Connect (mapstatetoprops) (MyComp); When the state changes, or the ownprops changes, the mapstatetoprops is called to calculate a new Stateprops, which is updated to MyComp (after the merge with Ownprops). This is the basic way to connect the data in the Redux store to the component. Mapdispatchtoprops (Dispatch, Ownprops): The second parameter of Dispatchpropsconnect is Mapdispatchtoprops, and its function is to bind the action as props to the On the MyComp. Const MAPDISPATCHTOPROPS = (dispAtch, Ownprops) = {return {increase: (... args) = Dispatch (Actions.increase (... args)), Decrease: (.... args) = = Dispatch (Actions.decrease (... args))}}class MyComp extends Component {render () {const {count, increase, decre    ASE} = This.props; Return (<div> <div> count: {this.props.count} times </div> <button onclick={increase}> add </button > <button onclick={decrease}> Reduction </button> </div>)}}const Comp = connect (mapstatetoprops, map Dispatchtoprops) (mycomp); Because the Mapdispatchtoprops method returns an object with a increase attribute and a decrease property, these two properties also become MyComp props. As shown above, call Actions.increase () can only get an Action object {type: ' Increase '}, to trigger this action must be raised in the store with the dispatch method. Diapatch is the first parameter of Mapdispatchtoprops. However, in order not to let the MyComp component perceive the existence of dispatch, we need to wrap the increase and decrease two functions to make it a directly callable function (that is, invoking the method will trigger dispatch). The Redux itself provides a bindactioncreators function that wraps the action into a function that can be called directly. Import {bindactioncreators} from ' redux '; const MAPDISPATCHTOPROPS = (Dispatch, ownprops) = {return Bindactioncreators ({increase:action.increase, decrease:action.decrease});} Similarly, when ownprops changes, the function is also called, generating a new dispatchprops, which is updated to MyComp (after the merge with Stateprope and Ownprops). Note that the action changes do not cause the above procedure, and the default action is fixed during the lifetime of the component. [Mergeprops (Stateprops, Dispatchprops, ownprops): props] said before, stateprops or dispatchprops, need and Ownprops merge Before being assigned to MyComp. The third parameter of Connect is to do this. Normally, you can not pass this parameter, and connect uses object.assign instead of the method. The rest of the options, which are relatively simple and generally less used (especially when you follow some of the other React "best practices"), are skipped. Students who want to know can read the documentation directly.

  

Reprinted from: https://www.tuicool.com/articles/MrmYN36

React-redux Mapstatetoprops,mapdispatchtoprops How to use

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: