redux dispatch 多次触发

Question

我在 Redux(React/Redux + redux-thunk)中遇到了以下不良行为:我正在触发一个事件(点击)，它让一个 Action 触发并将一些额外的数据作为数组中的对象分派(dispatch)。当我第一次单击时，操作会在数组中使用一个对象分派(dispatch)一次(结果 1:一个新对象) - 这很好。

但是现在发生了不想要的事情:

当我第二次单击调用新的附加数据时， Action 分派(dispatch)两次——第一次是以前调用的数据处于状态(结果 1)——第二次是新调用的数据处于状态(结果 2:两个相同的对象包含新的数据)。现在有三个处于状态的对象。

当我再次单击第三次调用新数据时，该操作首先分派(dispatch)三次，结果为 1，第二次分派(dispatch)结果 2，第三次分派(dispatch)再次新调用的数据处于状态(结果 3:三个相同的对象包含新数据)。现在有六个对象处于状态。

...等等...

我的期望: Action 应该总是触发一次，reducer 应该添加一次新的数据对象，从而导致对象的数量总是等于点击的数量。

这是一些代码:

那个行动:

export function getData(idData) {
    return function (dispatch, getState) {
        dispatch({type: "FETCHING_DATA"});
        const socket = getState().socket.socket;
        socket.emit("requestData", idData);
        socket.on("responseData", function(newData){
            console.log("TRIGGER");
            dispatch({type: "GET_DATA", payload: newData});
        });
    }
}

reducer :

export function priceMonitorReducers(
    state={
        data: [],
        isFetchingData: false,
    }, action) {
    switch (action.type) {
        case "FETCHING_DATA":
            return {...state, isFetchingData: true};
            break;
        case "GET_DATA":
            return {...state,
                data: [...state.data, action.payload],
                isFetchingData: false };
            break;
    }
    return state;
}

组件:

onGetData = (idData) => {
    this.props.getData(idData);
};

function mapStateToProps(state) {
    return {
        data: state.data,
        ...
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        getData: getData
        ...
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Journey);

我在哪里做错或期待错了？非常感谢您的帮助!

Answer 1

您正在为每个 getData 上的套接字注册一个额外的事件处理程序。称呼。相反，您应该在初始化时只注册一个处理程序，并且只注册 emit在 getData .