我有一个网站正在经历一个用户界面错误,有人可能可以帮助指出我的错误。我怀疑这与批处理,但我可能是错误的。
当用户更新记录时,该记录在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
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()函数的方式。
先谢了!
1条答案
按热度按时间oknrviil1#
所以我把派遣分成了三个独立的事件,它在生产中起作用了。
这是我的解决方案,以防任何人遇到类似的竞争条件和UI渲染问题。
将我的中间件更改为:
后端套接字向此发出
冗长,但解决了UI错误。