Question

我试图为React应用编写2个动作。

export const changeFilter = (newFilter) => {

return (dispatch) => {
    dispatch({type:types.GET_EVENTS_BY_FILTER});
    axios.get( 'http://localhost:8762/event/events?') // + eventsSelector.getEventsFilter()
        .then( response => {
            dispatch({type:types.GET_EVENTS_BY_FILTER_SUCCESS,payload:response});
        } )
        .catch( error => {
            dispatch({type:types.GET_EVENTS_BY_FILTER_FAIL,error:error});
        } );


  }
};

和

export const getEventsByFilter = () => {

return (dispatch) => {
    dispatch({type:types.GET_EVENTS_BY_FILTER});
    axios.get( 'http://localhost:8762/event/events?') // + eventsSelector.getEventsFilter()
        .then( response => {
            dispatch({type:types.GET_EVENTS_BY_FILTER_SUCCESS,payload:response});
        } )
        .catch( error => {
            dispatch({type:types.GET_EVENTS_BY_FILTER_FAIL,error:error});
        } );
    }
};

当我在getEventsByFilter中的return（dispatch）行上单击并按F10进行调试（在Chrome开发人员工具中）时，我转到下一行（这是预期的行为）。不幸的是，当我尝试调用changeFilter方法并点击return（dispatch）行并按下F10转到下一行调试器时，将我引向return语句的右括号，而不是下一行。我还检查了日志，因为我已经安装了redux logger，并且仅针对getEventsByFilter方法调度了操作。

Answer 1

我对这些方法的调用有所不同。两者都在eventActions文件中声明，而我在调用此函数的组件中有此声明：

const mapDispatchToProps = dispatch => {
    return {
        getEvents: () => dispatch(eventActions.getEvents()),
        getEventsByFilter: () => dispatch(eventActions.getEventsByFilter()),
        changeFilter: (newFilter) => dispatch(eventActions.changeFilter(newFilter))
    }
};

对于getEventsByFilter，我使用了this.props.getEventsByFilter();，像这样的changeFilter被称为eventActions.changeFilter({priceFrom:event.target.value});。我错过了dispatch的{{1}}方法。

调用了相同的javascript数组函数，并且行为有所不同

1 个答案: