Global NgRx State and NgRx Component Store

An example of a simple global NgRx Store that is used in a ComponentStore that reacts to global state changes and manipulates the rest.

Set up a global NgRx Store with Effects.

import { createAction, createFeature, createReducer, on } from "@ngrx/store";
import { createEffect } from "@ngrx/effects";
import { interval, map } from "rxjs";

interface CounterState {
  counter: number;
}

const initialCounterState: CounterState = {
  counter: 0,
};

export const incrementCounter = createAction(
  "[Angular Snippets Example] Increment Counter"
);

export const counterState = createFeature({
  name: "counter",
  reducer: createReducer(
    initialCounterState,
    on(incrementCounter, (state) => ({
      ...state,
      counter: state.counter + 1,
    }))
  ),
});

export const { selectCounter } = counterState;

export const incrementCounterEffect = createEffect(
  () => interval(1000).pipe(map(() => incrementCounter())),
  { functional: true }
);

Add your global state to the application

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { provideState, provideStore } from "@ngrx/store";
import {
  counterState,
  incrementCounterEffect,
} from "./app/global-state-in-component-store";
import { provideEffects } from "@ngrx/effects";

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({}),
    provideState(counterState),
    provideEffects({ incrementCounterEffect }),
  ],
}).catch((err) => console.error(err));

Pull the global state into a component store

import { Component, inject, Injectable } from "@angular/core";
import { ComponentStore } from "@ngrx/component-store";
import { Store } from "@ngrx/store";
import { Observable, tap } from "rxjs";
import { AsyncPipe } from "@angular/common";

interface MyState {
  counter: number;
}

@Injectable({ providedIn: "root" })
export class ComponentStoreWithGlobalState extends ComponentStore<MyState> {
  readonly counter$ = this.select((state) => state.counter);

  private readonly store = inject(Store);

  private readonly setCounter = this.updater((state, counter: number) => ({
    ...state,
    counter,
  }));

  private readonly multiplyGlobalStateByTwo = this.effect(
    (origin$: Observable<number>) =>
      origin$.pipe(tap((counter) => this.setCounter(counter * 2)))
  );

  constructor() {
    super({ counter: 0 });

    this.multiplyGlobalStateByTwo(this.store.select(selectCounter));
  }
}

@Component({
  selector: "component-store-with-global-state",
  standalone: true,
  providers: [ComponentStoreWithGlobalState],
  imports: [AsyncPipe],
  template: ` <div>{{ counter$ | async }}</div>`,
})
export class ComponentStoreWithGlobalStateComponent {
  readonly store = inject(ComponentStoreWithGlobalState);

  readonly counter$ = this.store.counter$;
}

Use the component

import { Component } from "@angular/core";
import { ComponentStoreWithGlobalStateComponent } from "./global-state-in-component-store";

@Component({
  standalone: true,
  selector: "angular-snippet-examples-root",
  template: `
    <component-store-with-global-state></component-store-with-global-state>
  `,
  styles: [],
  imports: [ComponentStoreWithGlobalStateComponent],
})
export class AppComponent {}