reactjs - Component dispatches action with old props -


i'm working on dashboard. , have multiple dropdowns. if user changes selected item on of them need fetch new stat data.

so i've store current value of dropdowns in redux store. onchange of dropdown i've dispatched new value of store. in app(parent) component map state props , dispatch stat fetch action.

however, app component dispatches statfetch action previous props, not new ones. suppose due fact component updating props bit later(https://github.com/reactjs/react-redux/issues/291).

how should make app component receive newest props? or intended pattern in case?

simplified code, parent:

@connect((store) => { ... } export default class app extends purecomponent {    handlestatrequest = () => {     this.props.dispatch(       statsfetch(         this.props.viewrange,         this.props.domain_id,         this.props.widget_id,         this.props.api,         this.props.is_mobile,         this.props.selectedcountry,         this.props.selectedregion,       )     );   }    render() {     return (       <div classname="wrapper">         <toolbar handlestatrequest={this.handlestatrequest}/>       </div>     );   } } 

and child

export default class toolbar extends purecomponent {      handlechange(e, data) {       this.props.dispatch(setdomainid(data.value));       this.props.handlestatrequest()     }     return (     <div classname="filter ">       <dropdown onchange={this.handlechange} />     </div>   ); } 

reducer

export function stats( state={   viewrange: "7",   startdate: null,   stopdate: null,   domain_id: null,   widget_id: null,   isloading: null,   errloading: null,   statsdata: {} }, action) {   switch (action.type) {     case 'set_view_range':       return {...state, viewrange: action.viewrange};     case 'set_view_start_date':       return {...state, startdate: action.startdate};     case 'set_view_stop_date':       return {...state, stopdate: action.stopdate};     case 'set_domain_id':       return {...state, domain_id: action.domain_id};     case 'set_widget_id':       return {...state, widget_id: action.widget_id};     case 'stat_data_fetch_loading':       return {...state, isloading: action.isloading};     case 'stat_data_fetch_request_url':       return {...state, requesturl: action.requesturl};     case 'stat_data_fetch_failure':       return {...state, errloading: action.errloading, errstatus: action.errstatus};     case 'stat_data_fetch_success':       return {...state, statsdata: action.statsdata};     default:       return state   } } 

action fetching data

export function statsfetch(viewrange=7, domain_id=null, widget_id=null, api=null, is_mobile=null, code=null, region=null) {   let domain = env === "development" ? "https://example.com" : "";   let url = "/some/path/";   let startstopdaterange = "?start=" + getdate(viewrange) + "&stop=" + getdate();   let domainsandwidgets = "&domains=" + domain_id + "&widgets=" + widget_id;   let apiparam = api === "null"? "" : "&api=" + api ;   let is_mobileparam = is_mobile === "null" ? "" : "&is_mobile=" + is_mobile ;   let devices = apiparam + is_mobileparam;   let countriesparam = code === "null" ? "" : "&country=" + code;   let regionparam = region === "null" ? "" : "&region=" + region;    let urlwithprams = domain + url + startstopdaterange + domainsandwidgets + devices + countriesparam + regionparam;    return (dispatch) => {     dispatch(statsfetchloading(true));     axios.get(urlwithprams, {withcredentials:true})       .then(response => { console.log('response',response); dispatch(statsfetchsuccess(response.data))})       .then(response => { dispatch(statsfetchloading(false)); })       .catch( error => {         dispatch(statsfetchfailure(true, error.response.status));         dispatch(statsfetchloading(false));         console.log(error)       })   }; } 

the reason why dispatching action old props because app component not update when dropdowns dispatch actions update store. either not pass corresponding state app component in mapstatetoprops or not update state in reducer in immutable way e.g. returning new state object. posting reducer code helpful.


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -