Search code examples
reactjsreduxsignalrredux-toolkitsignalr.client

redux dispatcher doesnt set some specific messages from socket (signalR)


i open the connection in a parent component above all and when a message comes i set it via redux and use it in another component. It's all good till messages come together(like glued) as shown in photo. when messages are received together redux sets one of two received messages. how do i overpass this issue that redux could handle each of socket's messages. enter image description here

 await hubConnection.start()
       .then(()=>{
           hubConnection?.on("ReceiveOrderEvents", (messageStreamItem: any) => {
            console.log(messageStreamItem,'messageStreamItem')
            dispatch(orderUpdateSocket(messageStreamItem));
           });
        })

Solution

  • after couple of days figuring out what the origin of problem was, i came up with an idea this solution: since socket might send multiple messages very fast and in a very short time, redux might not handle it very well. messages from socket could be stored in an array and via forEach you could dispatch every one of them inside a setTimeOut function to proceed with other things you are about to do.

    await hubConnection.start()
           .then(()=>{
               hubConnection?.on("ReceiveOrderEvents", (messageStreamItem: any) => {
                let msg=[];
                msg.push(messageStreamItem);
                setTimeOut(()=>{
                    msg.forEach((message:any)=>dispatch(setter(messageStreamItem)));
                    msg = []
                },[50])
               });
            })