redux dispatch 多次触发 [英] redux dispatch fires multiple times

查看:78
本文介绍了redux dispatch 多次触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 Redux (React/Redux + redux-thunk) 中遇到以下不想要的行为:我正在触发一个事件 (click),它允许一个动作触发并将一些额外的数据作为数组中的对象分派.当我第一次单击时,该操作会使用数组中的一个对象分派一次(结果 1:一个新对象) - 这很好.

I'm experiencing following unwanted behaviour in Redux (React/ Redux + redux-thunk): I'm triggering an event (click) wich lets an action fire and dispatch some additional data as objects in an array. When I'm clicking the first time the action dispatches once with one object in the array (result 1: one new object) - and that's fine.

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

But now the unwanted thing happens:

当我第二次点击调用新的附加数据时,动作会分派两次 - 第一次是之前调用的数据处于状态(结果 1) - 第二次是新调用的数据处于状态(结果 2:两个相同的对象)包含新数据).现在有三个对象处于状态.

When I'm clicking the second time calling for new additional data the action dispatches twice - first time with the formerly called data in state (result 1) - secondly with the newly called data in state (result 2: two identical objects containing the new data). Having three objects in state now.

当我再次点击第三次调用新数据时,动作首先分派三次结果 1,其次是结果 2,第三次是再次新调用的数据处于状态(结果 3:三个相同的对象包含新数据).现在有六个对象处于状态.

When I'm clicking the third time again calling for new data the action dispatches three times first with result 1 secondly with result 2 and the third time with the again-newly called data in state (result 3: three identical objects containing the new data). Having six objects in state now.

...等等...

我的期望:action 应该总是触发一次,reducer 应该相应地添加一次新的数据对象,从而导致对象的数量总是等于点击的数量.

My expectation: The action should always fire once and the reducer should add the new data-object once accordingly resulting in that the amount of objects is always equal the the amount clicks.

这是一些代码:

动作:

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

减速器:

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

我在做什么或期望错在哪里?非常感谢您的帮助!

Where am I doing or expecting wrong? Your help is much appreciated!

推荐答案

您要在每次 getData 调用时向套接字注册一个额外的事件处理程序.相反,您应该在初始化时只注册一个处理程序,并且只在 getData 中注册 emit.

You're registering an extra event handler to the socket on each getData call. Instead, you should register just one handler on initialization and only emit in getData.

这篇关于redux dispatch 多次触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆