用多个动作反应 redux 更新状态 onClick 函数

Question

我正在尝试更新 redux 状态，我遇到的问题是当使用多个操作执行 onclick 函数时 mapStateToProps 没有被更新。我知道动作是异步运行的，这就是状态没有按时更新的原因。有没有办法克服这个问题

代码示例

执行 OnClickFunction 时，getCase 操作将 this.props.filters.active_case_page 作为页码 并且 nexPage 操作更改了 active_case_page 索引，但这里的问题是 this.props.getCases 在执行 getCase 操作时仍然具有 this.props.filters.active_case_page 的旧值

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;
}

Answer 1

现在您的问题已经更清楚了，看起来您正在寻找一种在第一个操作已经完成后调度第二个操作的方法。

我可能会以这种方式使用componentWillReceiveProps：

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'
    }
}

但是 IMO，整个模式不是很好。 我会将这两个动作放在一个动作中并一起处理所有事情（除非您的问题中缺少功能，因为目前我看不出有任何理由将此动作分为两个动作）