我有一个简单的React应用程序,它允许在各种实体上执行CRUD操作。它使用RTK查询与后端交互,我想利用它内置的缓存系统--只有当一个给定标签的端点发生变异时该高速缓存才会失效。只要我只打开一个标签,它就能正常工作。如果有多个用户与应用程序交互并且其中一个用户执行突变,该高速缓存将仅在此用户的浏览器选项卡中无效。更新不会填充到当前连接到应用程序的其他浏览器或选项卡。每个用户都必须在另一个用户执行了一个变异之后手动刷新页面。解决这个问题的一个方法是invalidate the cache periodically,这并不理想,另一个方法是强制每个查询重新获取焦点,这更糟糕。最好的方案是以某种方式检测到另一个用户已经为给定的端点发送了一个变异。然后在连接到应用程序的每个其他浏览器选项卡中使该端点该高速缓存(按标记)无效。我正在寻找一个比我已经实现的更好的解决方案,如下所示:
1.有一个带有单个websocket的全局组件,它立即连接到后端
1.后端为套接字分配一个唯一的标识符,将其保存在套接字池中,并发回一个带有该标识符的事件
1.具有套接字的组件将标识符保存在Redux中
- RTK查询将标识符作为自定义标头添加到发送到后端的每个请求
1.后端检查请求的HTTP方法,如果是变异(POST / PUT / PATCH / DELETE),则从自定义头中提取标识符,过滤套接字池,排除与请求中具有相同标识符的套接字,向所有过滤的套接字发送带有正在变异的服务标记的事件
1.组件的套接字接收事件,并使用RTK Query的invalidateTags实用程序函数使变异服务该高速缓存无效
正因为如此,整个应用程序的功能就像是一个实时协作工具,任何用户所做的任何更改都会立即反映在所有连接的浏览器选项卡中。然而,我认为它有点太复杂了,我觉得我是在重新发明轮子。这种场景肯定很受欢迎,我肯定错过了一些东西,比如解决这个问题的npm包。RTK Query选项(我省略了)或众所周知的设计模式。当然,有多个包允许跨多个选项卡同步Redux Store,但这并不能解决多个用户从不同设备连接的问题。
1条答案
按热度按时间o4tp2gmn1#
只要我只打开一个选项卡,它就可以正常工作
默认情况下,JS代码位于单个选项卡/打开页面中。
这包括JS变量和逻辑,Redux存储只是另一个JS变量。
RTK查询不是专门设计用于跨选项卡交互的。您必须自己编写该部分。
如果关注的是多个用户与同一个后端服务器交互,这就是RTK Query的轮询选项的作用。或者,是的,你可以让服务器通过WebSocket发送一个信号,让客户端知道它需要重新获取数据。但同样,这是你需要自己编写的东西,因为它是特定于你自己的应用程序的需要。