Akita: persistState across windows

Created on 4 Jun 2019  路  8Comments  路  Source: datorama/akita

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x ] Support request
[ ] Other... Please describe:

Basic repro here:

https://stackblitz.com/edit/akita-persiststate-windowed

Just looking for some guidance or best practices if this has been done before.
I'm attempting to access state across windows - ie from a window I've opened within the app using persistState (localStorage or sessionStorage). When the new window first opens, all good, state from the main window is read from storage.

Updating the state in one window obviously doesn't reflect in the other window though. Do you have any recommendations on how to sync state between windows?
One these hooks perhaps - deserialize and serialize, preStorageUpdate or preStoreUpdate?

Fantastic work on the project as well!

enhancement help wanted

Most helpful comment

Yeah it's a bit of weird one. Basically it's for multiple monitor support. I'm prototyping replacing a desktop system that has a heavily utilised GIS display in separate form so users can interact with it independently of the main form on a different monitor. Plenty of common state between the forms...easy for desktop apps running in the same process :). The persons list in the example is completely contrived, in reality it would be a store of geographic objects.

All 8 comments

What about something like:

import { snapshotManager } from '@datorama/akita';

export class AppComponent {
  ngOnInit() {
    fromEvent<StorageEvent>(window, 'storage')
      .pipe(
        // listen to our storage key
        filter(event => event.key === 'AkitaStores'),
      ).subscribe(event => {
        const stores = JSON.parse(event.newValue);
        snapshotManager.setStoresSnapshot(stores);
     });
  }
}

Actually, it will cause an infinite loop. Let me think about it.

Awesome, thanks for super quick response.
I thought there may have been some sort of existing hook or workaround, if not no worries I'll start having a more in depth look.
Using the storage events is a good idea, at the least it's a perfect place to start.

tSLKQfPTCa

    fromEvent<StorageEvent>(window, 'storage')
      .pipe(
        // listen to our storage key
        filter(event => event.key === 'AkitaStores'),
      ).subscribe(event => {
        const stores = JSON.parse(event.newValue);
        snapshotManager.setStoresSnapshot(stores, { skipStorageUpdate: true });
     });

You're a legend! Thanks for the quick response again. I've just given it a quick spin but it is working perfectly.

You're welcome. I'm wondering what a real-world use case for this functionality is?

Yeah it's a bit of weird one. Basically it's for multiple monitor support. I'm prototyping replacing a desktop system that has a heavily utilised GIS display in separate form so users can interact with it independently of the main form on a different monitor. Plenty of common state between the forms...easy for desktop apps running in the same process :). The persons list in the example is completely contrived, in reality it would be a store of geographic objects.

Was this page helpful?
0 / 5 - 0 ratings