DEV Community

Cover image for Keeping browser tabs in sync using localStorage, NgRx, and RxJS
Tim Deschryver for Angular

Posted on • Updated on • Originally published at


Keeping browser tabs in sync using localStorage, NgRx, and RxJS

In this post, we're going to take a look at how we can keep application state in sync when a user has multiple tabs open. We're going to make this happen by using the Web Storage API, NgRx (Store and Effects), and RxJS. A basic knowledge of NgRx is needed to follow the examples.

There are two ways of syncing state that I know of. One of them is to send the actions from one tab to another tab, the other is to send the (partial) state from one tab to another tab. While both of them have a very similar implementation, they both shine in their own way.

As a starting point, we're going to pick up where we left off in a previous post "Let's have a chat about Actions and Action Creators within NgRx" where we created a simple grocery list.


Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!