reactjs - What is difference between using mapDispatchToProps and this.props.dispatch() -
this question has answer here:
could provide difference between - mapdispatchtoprops , this.props.dispatch()
- which 1 use when?
- is reduxthunk
i've below code using this.props.dispatch
/*action-navigation*/ /*navigation action*/ const init = () => { return (dispatch) => { dispatch ({ type : 'nav_links', data : ['home', 'summary'] }) } } /*component-navigation*/ class navigation extends react.component { constructor(props){ super(props); this.state = { }; } componentwillmount() { this.props.dispatch(init()); } componentwillreceiveprops(props){ console.log(props); } render() { return ( <div classname="navigation-wrap"> <div classname="navigation-header"> navigation </div> {this.props.navigationreducer.navigationlinks.map((links, index) => <div key={index}>{links}</div>)} </div> ) } } const mapstatetoprops = (state={}) => { return { navigationreducer : state.navigationreducer, navigationlinks : state.navigationreducer.navigationlinks } } let navigationcontainer = reactredux.connect(mapstatetoprops)(navigation); /*reducer-navigation*/ /*navigation reducer*/ let initialstate = {}; const navigationreducer = (state=initialstate, action) => { switch(action.type){ case 'nav_links': return object.assign(state, { navigationlinks : action.data }) default: return state } } /*reducer-index*/ /*combine reducers*/ const reducers = redux.combinereducers({ navigationreducer }); /*app*/ /*create store*/ const store = redux.createstore( reducers, redux.applymiddleware(reduxthunk.default) ); /*render component dom*/ const render = () => { reactdom.render( <reactredux.provider store={store}> <navigationcontainer /> </reactredux.provider>, document.getelementbyid('rootapp') ); } render();
when using redux connect, mapdispatchtoprops makes dispatch method available props. why have access this.props.dispatch() in component.
Comments
Post a Comment