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，整个模式并不是很好。我会将两个动作放在一个动作中并一起处理所有动作（除非你的问题中缺少一个功能，因为目前我没有看到任何理由将此动作分成两个动作）

使用多个操作来执行react redux更新状态onClick函数

1 个答案: