npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ngrx-addons/sync-state

v7.0.0

Published

Sync state between tabs for ngrx, based on elf-sync-state

Downloads

2,465

Readme

@ngrx-addons/sync-state npm bundle size npm NPM npm

The library for synchronizing state in ngrx between multiple tabs/iframes/windows. Highly inspired by elf-sync-state.

Supported versions

  • angular 18+
  • @ngrx/store 18+

Installation

npm i @ngrx-addons/sync-state

or

yarn add @ngrx-addons/sync-state

Usage

The module gives ability to sync some of the app’s states using Broadcast Channel API. It supports both root and feature states. The only thing you need to do is to add SyncStateModule.forRoot/provideSyncStore to your AppModule and SyncStateModule.forFeature/provideSyncState to your feature module.

For root states

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { BeforeAppInit } from '@ngrx-addons/common';
import { SyncStateModule } from '@ngrx-addons/sync-store';

const counterReducer = ...;
const reducers = {
  counter: counterReducer,
} as const;

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    // type provided for hints on states
    SyncStateModule.forRoot<typeof reducers>({
      states: [
        {
          key: 'counter',
          // optional options (default values)
          runGuard: () =>
            typeof window !== 'undefined' &&
            typeof window.BroadcastChannel !== 'undefined',
          source: (state) => state,
          channel: `${channelPrefix}-${key}@store`,
          skip: 1
        },
        // next states to sync, same reducer key can be
        // specified multiple times to sync parts of the state
        // using different channels
      ],
      // optional root options (for all, also feature states)
      channelPrefix: 'some-prefix',
      // optional sync strategy
      strategy: BeforeAppInit, // or AfterAppInit
    }),
  ],
})
export class AppModule {}

or in case of using standalone API:

import { NgModule } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { BeforeAppInit } from '@ngrx-addons/common';
import { provideSyncStore } from '@ngrx-addons/sync-store';

const counterReducer = ...;
const reducers = {
  counter: counterReducer,
} as const;

@NgModule({
  providers: [
    provideStore(reducers),
    // type provided for hints on states
    provideSyncStore<typeof reducers>({
      states: [
        {
          key: 'counter',
          // optional options (default values)
          runGuard: () =>
            typeof window !== 'undefined' &&
            typeof window.BroadcastChannel !== 'undefined',
          source: (state) => state,
          channel: `${channelPrefix}-${key}@store`,
          skip: 1
        },
        // next states to sync, same reducer key can be
        // specified multiple times to sync parts of the state
        // using different channels
      ],
      // optional root options (for all, also feature states)
      channelPrefix: 'some-prefix',
      // optional sync strategy
      strategy: BeforeAppInit, // or AfterAppInit
    }),
  ],
})
export class AppModule {}

The forRoot/provideSyncStore method accepts an object with the following properties:

  • states - array of states configs (defined below, required)
  • channelPrefix - prefix for all channels (optional)
  • strategy - defines if sync actions should be allowed before or only after app initialization (optional, default: BeforeAppInit)

Each state can be described by multiple state configs with the following properties:

  • key - the reducer key in app state (required).
  • source: a method that receives the observable of a state and return what to save from it (by default - the entire state).
  • channel: the name under which the store state is synchronized (by default - the prefix plus store name plus a @store suffix).
  • runGuard - returns whether the actual implementation should be run. The default is typeof window !== 'undefined' && typeof window.BroadcastChannel !== 'undefined'
  • skip - The number of state changes skipped before the state is synced. Used to skip the initial state change. The default is 1.

For feature states

Remember to add features only once, in any case only the last registration will be used.

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { SyncStateModule } from '@ngrx-addons/sync-store';

interface CounterState {
  count: number;
}
const counterReducer = ...;

@NgModule({
  imports: [
    StoreModule.forRoot(),
    // forRoot should be always called, similar to ngrx StoreModule and it's forFeature implementation.
    SyncStateModule.forRoot(),
  ],
})
export class AppModule {}

@NgModule({
  imports: [
    StoreModule.forFeature('counter', reducer),
    // type provided for hints on states
    SyncStateModule.forFeature<CounterState>({
      key: 'counter',
      states: [
        {
          // The same options as for root states, except the key
        },
      ],
    }),
  ],
})
export class CounterModule {}

or in case of using standalone API:

import { NgModule } from '@angular/core';
import { provideStore, provideState } from '@ngrx/store';
import { provideSyncStore, provideSyncState, } from '@ngrx-addons/sync-store';

interface CounterState {
  count: number;
}
const counterReducer = ...;

@NgModule({
  providers: [
    provideStore(),
    // forRoot should be always called, similar to ngrx StoreModule and it's forFeature implementation.
    provideSyncStore(),
  ],
})
export class AppModule {}

@NgModule({
  imports: [
    provideState('counter', reducer),
    // type provided for hints on states
    provideSyncState<CounterState>({
      key: 'counter',
      states: [
        {
          // The same options as for root states, except the key
        },
      ],
    }),
  ],
})
export class CounterModule {}

The forFeature/provideSyncState method accepts an object with the following properties:

  • key - the feature key (required)
  • states - array of states configs as in forRoot, except key property (required)

Once the state is synchronized, the action (storeSyncAction, type: @ngrx-addons/sync-state/sync) with the proper features is dispatched (multiple times). You can use it to react in effects or meta-reducers.

Excluding/Including keys from the state​

The excludeKeys()/includeKeys() operator can be used to exclude keys from the state:

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { excludeKeys, includeKeys } from '@ngrx-addons/common';
import { SyncStateModule } from '@ngrx-addons/sync-store';

const counterReducer = ...;
const reducers = {
  counter: counterReducer,
} as const;

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    SyncStateModule.forRoot<typeof reducers>({
      states: [
        {
          key: 'counter',
          source: (state) => state.pipe(excludeKeys(['a', 'b'])),
          // source: (state) => state.pipe(includeKeys(['a', 'b'])),
        },
      ],
    }),
  ],
})
export class AppModule {}

Examples

Check apps