Синхронизация нескольких вкладок с использованием библиотеки управления состоянием NGXS, Rxjs и localStorage

Неделю назад я увидел сообщение в блоге о «Синхронизации нескольких вкладок» здесь.

Автор @Tim Deschryver был одним из членов команды библиотеки NGRX. И у него действительно отличные посты.

В этом посте я решил написать ту же концепцию с библиотекой управления состоянием для Angular под названием NGXS.

Я думаю, что NGXS лучше библиотека шаблонов для angular.

Любой, кто интересуется, почему я предпочитаю использовать NGXS, а не NGRX, также может прочитать этот пост; «Почему я предпочитаю NGXS, а не NGRX»

** Вернемся к нашей теме;
**

1. Мы собираемся использовать NGXS для управления состоянием в угловом приложении.
2. Сохраните имя нашего ACTION в localStorage.
3. Слушайте событие window.storage с оператором fromEvent

Как результат;

1. Мы изменим данные в одной вкладке, а другая вкладка обновится автоматически.
2. Для быстрого примера мы собираемся проверить статус входа. Если пользователь выйдет из системы на одной вкладке, другая также перенаправит его на страницу входа.

Демонстрационное видео приложения;

** Полный код в моем профиле на github: https://github.com/mehmetakifalp/ngxs-keep-browser-tab-sync
Демо StackBlitz;

https://stackblitz.com/edit/angular-rxjs-localstorage-fromevent
Этот пост опубликован на моем средний профиль неделю назад.