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