使用中间件和Redux的React 18和SocketIO的UI错误onClick事件

brgchamk  于 2023-01-13  发布在  React
关注(0)|答案(1)|浏览(100)

我有一个网站正在经历一个用户界面错误,有人可能可以帮助指出我的错误。我怀疑这与批处理,但我可能是错误的。
当用户更新记录时,该记录在ExpressJS后端中更新,沿着后端中的两个稍微密集的计算在大约30,000条记录上运行,然后使用更新的记录updatedMetrics 1、updatedMetrics 2发出WebSocket事件。
下面是我的后端如何处理这个问题。

//Do the things here....  
    // Things completed, now emit socket event and respond to client...
      io.emit('indv', {individual: singleIndividual, ijMetrics: newJobMetrics, ieMetrics: newEmployerMetrics, isNew: false});

      const formattedIndividual = returnIndividualType(results.rows);
      res.status(200).send({message: 'Individual Updated!', data: {individuals: formattedIndividual} });

因此,事件“indv”被发送给所有订阅用户并更新该记录,沿着在其各自的redux存储中添加updatedMetrics 1和updatedMetrics 2。
res.status(200).send(...)用于更新记录的用户,此响应将触发映像#2
1.是更新模态。x1c 0d1x

  1. res.status(200).send(...).

    触发此模态的数据是否保存成功
    1.是用户单击图像#2中的按钮时的页面。

现在......这是有趣的部分。当映像#2出现时,我单击它......它就“冻结”了。一旦中间件处理完三个调度函数,导航就完成了,您将看到映像#3
我怀疑中间件阻塞了状态更改和导航逻辑。很可能是由于下面代码的架构不好。

socket.on('indv', (res) => {
        console.info('indv event received, ', res);
        //send individual object
        mwStore.dispatch(socketIndividualPayload(res));
        mwStore.dispatch(socketJobMetrics({ijMetrics: res.ijMetrics, isNew: res.isNew}));
        mwStore.dispatch(socketEmployerMetrics({ieMetrics: res.ieMetrics, isNew: res.isNew}));
      });

它为什么要这样做?感觉我的点击按钮事件在中间件调度后排队。我在图像#2的按钮上放置了一个控制台日志,果然,它在我的mwStore.dispatch(socketEmployerMetrics({ieMetrics: res.ieMetrics, isNew: res.isNew}));操作完成后记录了消息。
在开发环境中,它是即时的,我没有遇到这种“冻结/挂起”UI。
查看我的实时站点的开发工具,我的socket.emit('indv')返回速度超快,这让我怀疑这就是我设置中间件mwStore.dispatch()函数的方式。
先谢了!

oknrviil

oknrviil1#

所以我把派遣分成了三个独立的事件,它在生产中起作用了。
这是我的解决方案,以防任何人遇到类似的竞争条件和UI渲染问题。
将我的中间件更改为:

socket.on('indv', (res) => {
        console.info('indv event recieved, ', res);
        //send individual object
        mwStore.dispatch(socketIndividualPayload(res));
      });
      socket.on('jMetric', (res) => {
        console.log('Job Metrics Socket recieved');
        mwStore.dispatch(socketJobMetrics({ijMetrics: res.ijMetrics, isNew: res.isNew}));
      });
      socket.on('eMetric', (res) => {
        console.log('Employer Metrics Socket recieved');
        mwStore.dispatch(socketEmployerMetrics({ieMetrics: res.ieMetrics, isNew: res.isNew}));
      });

后端套接字向此发出

io.emit('indv', {individual: singleIndividual, isNew: false});
        io.emit('jMetric', {ijMetrics: newJobMetrics, isNew: false});
        io.emit('eMetric', {ieMetrics: newEmployerMetrics, isNew: false});

冗长,但解决了UI错误。

相关问题