Как лучше всего решить проблему отправки мутаций с нескольких вкладок браузера в RTK Query?

У меня есть простое приложение React, которое позволяет выполнять операции CRUD с различными объектами. Он использует RTK Query для взаимодействия с бэкендом, и я хочу использовать его встроенную систему кэширования — аннулирование кеша только тогда, когда мутация выполняется на конечной точке с заданным тегом. Пока у меня открыта только одна вкладка, работает нормально. Если с приложением взаимодействует несколько пользователей, и один из них выполняет мутацию, кеш будет аннулирован только на вкладке браузера этого пользователя. Обновление не будет распространяться на другие браузеры или вкладки, которые в данный момент подключены к приложению. Каждый пользователь должен был бы вручную обновить страницу после того, как другой пользователь выполнил мутацию. Один из способов решить эту проблему — периодически аннулировать кэш , что не идеально, другой — заставить каждый запрос повторно получать данные в фокусе, что еще хуже. Лучшим сценарием было бы каким-то образом обнаружить, что другой пользователь отправил мутацию для данной конечной точки, а затем аннулировать кеш этой конечной точки (по тегам) на каждой другой вкладке браузера, подключенной к приложению. Я ищу решение, которое лучше, чем то, что я уже реализовал, а именно следующее:

  1. Есть глобальный компонент с одним веб-сокетом, который сразу же подключается к серверной части.
  2. Бэкэнд присваивает сокету уникальный идентификатор, сохраняет его в пуле сокетов и отправляет обратно событие с идентификатором.
  3. Компонент с сокетом сохраняет идентификатор в Redux
  4. RTK Query добавляет идентификатор в качестве пользовательского заголовка к каждому запросу, отправляемому на серверную часть.
  5. Серверная часть проверяет HTTP-метод запроса. Если это мутация (POST/PUT/PATCH/DELETE), извлекает идентификатор из кастомного заголовка, фильтрует пул сокетов, исключая сокет с таким же идентификатором, как в запросе, отправляет событие с тегом сервиса который мутируется во все отфильтрованные сокеты
  6. Сокет компонента получает событие и использует служебную функцию invalidateTags RTK Query для аннулирования кеша измененного сервиса.

Благодаря этому все приложение работает так, как если бы оно было инструментом совместной работы в реальном времени, где каждое изменение, сделанное любым пользователем, немедленно отражается на всех подключенных вкладках браузера. Тем не менее, я думаю, что это слишком сложно, и я чувствую, что заново изобретаю велосипед. Этот сценарий, безусловно, довольно популярен, и должно быть что-то, что я упустил, например, пакет npm, решающий эту проблему, вариант RTK Query, который я пропустил, или известный шаблон проектирования. Конечно, есть несколько пакетов, которые позволяют синхронизировать Redux Store на нескольких вкладках, но это не решает проблему подключения нескольких пользователей с разных устройств.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Он работает нормально, пока у меня открыта только одна вкладка.

Код JS по умолчанию находится на одной вкладке/открытой странице.

Это включает в себя переменные и логику JS, а хранилище Redux — это просто еще одна переменная JS.

RTK Query не предназначен специально для взаимодействия между вкладками. Вам придется написать эту часть самостоятельно.

Если проблема заключается в том, что несколько пользователей взаимодействуют с одним и тем же внутренним сервером, для этого предназначены параметры опроса RTK Query. В качестве альтернативы, да, вы можете заставить сервер отправлять сигнал через веб-сокет, чтобы сообщить клиенту, что ему нужно обновить данные. Но опять же, это то, что вам нужно будет написать самостоятельно, так как это зависит от потребностей вашего собственного приложения.

Спасибо! К счастью, я уже написал часть с WebSocket, и она работает, но я просто хотел подтвердить, что не упускаю ничего очевидного, например известного шаблона проектирования, который следует использовать в таких сценариях. Спасибо за подтверждение!

Tomasz Kasperczyk 21.01.2023 18:16

Другие вопросы по теме