javascript - react redux 更新状态 onClick 函数与多个 Action

Question

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

代码示例

当执行OnClickFunction时，getCase action将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，整个模式不太好。我会把这两个 Action 放在一个 Action 中并一起处理所有事情(除非你的问题中缺少功能，因为目前我看不出有任何理由将这个 Action 分成两个 Action )