CODEWITHSUNDEEP
javascriptnode.jsreactjsreduxreact-redux
publicArt33
publicArt33

Reputation: 315

React redux update state onClick function with multiple actions

I am trying to update redux state, the problem i run into is the mapStateToProps is not being update when onclick function being executed with multiple actions. I know actions are running asynchronously and thats why state is not being update on time. is there away to overcome this issue

code Example

when OnClickFunction is executed, getCase action takes this.props.filters.active_case_page as a page number and nexPage action changes the active_case_page index, but the issue here is that this.props.getCases still has the old value of this.props.filters.active_case_page when getCase action executes

OnClickFunction = () => {
    this.props.nextPage(this.props.filters.active_case_page);
    this.props.getCases(this.props.filters.active_case_page,'All','dateCreated',false,null,'5a9ee9fa88406eeeebabbd1f')
}

function mapStateToProps(state){
    return{
        filters: state.doctors.filters,
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({

        nextPage:nextPage,
        getCases:getCases
    },dispatch)
}

export function nextPage(){

    return{
        type:"NEXT_PAGE"
    }
}

export function getCases(pageNum,filterType,filterOption,isSearchOn,searchText,doctor_id){

    return function(dispatch){
        axios.get("/api/getCases/"+pageNum+"/"+filterType+"/"+filterOption+"/"+isSearchOn+"/"+searchText+"/"+doctor_id)
            .then(function(response){
                dispatch({type:"GET_CASES",payload:response.data});
            })
            .catch(function(err){
                dispatch({type:"GET_CASES_REJECTED",payload:err});
            })
    }
}

export function doctorsReducers(state={
    customer_cases:[],
    filters:{
        active_case_page:0,
        selected_cases_filter:'dateCreated',
        filter_options: 'All',
        isCaseSearchOn:false,
        search_cases:'',
    }

}, action){
    switch(action.type){

        case "NEXT_PAGE":
        // return the state and copy of boos array from state
            return {
                ...state,
                filters:{
                    ...state.filters,
                    active_case_page:state.filters.active_case_page+1,
                }

            }
        break;

        case "GET_CASES":
        // return the state and copy of boos array from state
            return {
                ...state,
                customer_cases:[...action.payload[0]],
            }
        break;

    }
    return state;
}

Upvotes: 1

Views: 690

Answers (1)

Matan Bobi
Matan Bobi

Reputation: 2813

Now that you've made your question clearer, it looks like you're looking for a way to dispatch the second action once the first action was already completed.

I would probably use componentWillReceiveProps in this way:

componentWillReceiveProps(nextProps){
    const {filters: {active_case_page}, getCases} = nextProps;
    if (active_case_page !== this.props.filters.active_case_page){
      getCases(active_case_page,'All','dateCreated',false,null,'5a9ee9fa88406eeeebabbd1f'
    }
}

But IMO, the whole pattern isn't pretty good. I would put both of the actions in one action and handle everything together (unless there's a functionality missing in your question because currently I dont see any reason to separate this action to two actions)

Upvotes: 3

Related Questions