Function: watch()

watch<State, S, R>(path, adapter?): { [P in string | number | symbol as `${P extends string ? P<P> : never}$`]: Observable<ReturnType<(S & WithGetState<State>)[P]>> } & object & object & () => undefined | State & object & { [K in string | number | symbol]: Signal<undefined | ReturnType<S[K]>> }

Defined in: libs/angular/src/lib/watch.function.ts:64

watch wraps StateAdapt.watch for Angular and adds signals for the store's selectors.

watch returns a detached store (doesn't chain off of sources). This allows you to watch state without affecting anything. Its signals are undefined until the watched path becomes active, then mirror its latest state without activating its sources. It takes the path of the state you are interested in and, optionally, the adapter containing the selectors you want to use.

watch(path, adapter)

path — Object path in Redux Devtools

adapter — Optional object with state change functions and selectors. When omitted, watch uses the base adapter.

Usage

watch enables accessing state without subscribing to sources. For example, if your adapter manages the loading state for an HTTP request and you need to know if the request is loading before the user is interested in the data, watch can give you access to it without triggering the request.

Example: Accessing loading state

import { Component } from '@angular/core';
import { watch } from '@state-adapt/angular';

import { httpAdapter } from './http.adapter';

@Component({
  template: `
    @if (data.loading()) {
      <sa-spinner />
    }
  `,
})
export class MyComponent {
  // Reads the loading state of the 'data' store
  // without activating it or triggering the request
  data = watch('data', httpAdapter);
}

Type Parameters

State

State = any

S

S extends Selectors<State> = { }

R

R extends ReactionsWithSelectors<State, S> = { }

Parameters

path

string

adapter?

Adapter<State, S, R & BasicAdapterMethods<State>>

Returns