Options
All
  • Public
  • Public/Protected
  • All
Menu

An ObservableStore maintains data of generic type StoreDataT, providing methods to set the fields, in turn emitting values on requested Observables. The values are emitted as read-only objects to prevent manipulation of the internal data structure.

The ObservableStore can write its state to LocalStorage, making it possible to easily recreate the application state when reloading the app.

(The ObservableStore is itself an Observable of type StoreDataT, acting like a BehaviorSubject, maintaining a single value and replaying it to new subscribers).

example
interface ApplicationData {
name: string;
count: number;
}
const applicationState = new ObservableStore<ApplicationData>({
name: 'Initial value',
count: 0
});
applicationState.observe('name').subscribe(value => console.log(value));
applicationState.set('name', 'New name');

Type parameters

  • StoreDataT

Hierarchy

  • Observable<StoreDataT>
    • ObservableStore

Index

Constructors

constructor

  • new ObservableStore<StoreDataT>(initialValue: StoreDataT, fieldsToPersist?: { [ K in string | number | symbol]?: boolean | { deserializer?: any; serializer?: any } }, storeNamespace?: string): ObservableStore<StoreDataT>
  • example
    new ObservableStore<TestObject>(
    {a: 'A', b: 1},
    {
    a: {serializer: v => JSON.stringify(v), deserializer: json => JSON.parse(json)},
    b: true
    }
    );

    Type parameters

    • StoreDataT

    Parameters

    • initialValue: StoreDataT

      A valid instance of type StoreDataT, serving as the initial value of the data.

    • Optional fieldsToPersist: { [ K in string | number | symbol]?: boolean | { deserializer?: any; serializer?: any } }

      An object describing which fields in the store data to persist in localStorage. The object consists of keys matching the keys in `StoreDataT´, with either a boolean value (true if the value should be persisted as standard JSON), or an object with custom serializer/deserializers for the field.

    • Optional storeNamespace: string

      If given, will be used when storing state in LocalStorage. This allows an app to use more than one ObservableStore without their values colliding.

    Returns ObservableStore<StoreDataT>

Methods

addToList

  • addToList<KeyInStoreT>(key: KeyInStoreT, element: ArrayElement<StoreDataT[KeyInStoreT]>): void
  • Concats the given element to the list in field key, updating the value as per set

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT
    • element: ArrayElement<StoreDataT[KeyInStoreT]>

    Returns void

apply

  • apply<KeyInStoreT>(updateFunction: (storeData: DeepReadonly<StoreDataT>) => Pick<StoreDataT, KeyInStoreT>): DeepReadonly<Pick<StoreDataT, KeyInStoreT>>
  • apply<KeyInStoreT>(updateFunction: (storeData: DeepReadonly<StoreDataT>) => Partial<StoreDataT>): DeepReadonly<Partial<StoreDataT>>
  • apply<KeyInStoreT>(updateFunction: (storeData: DeepReadonly<StoreDataT>) => Promise<Pick<StoreDataT, KeyInStoreT>>): Promise<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>
  • apply<KeyInStoreT>(updateFunction: (storeData: DeepReadonly<StoreDataT>) => Promise<Partial<StoreDataT>>): Promise<DeepReadonly<Partial<StoreDataT>>>
  • Updates the ObservableStore based on the current values in the store. This is useful if you need functionality such as "add an item to an existing array in the store". (Remember that the store values should be treated as immutable, so in this example, you should .concat rather than .push).

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • updateFunction: (storeData: DeepReadonly<StoreDataT>) => Pick<StoreDataT, KeyInStoreT>

      A function which takes the current data of the store and returns an object with a subset (Pick) of the fields. The calculated fields will be updated in the store, and any Observables will be triggered as if the values had been set with set.

        • (storeData: DeepReadonly<StoreDataT>): Pick<StoreDataT, KeyInStoreT>
        • Parameters

          • storeData: DeepReadonly<StoreDataT>

          Returns Pick<StoreDataT, KeyInStoreT>

    Returns DeepReadonly<Pick<StoreDataT, KeyInStoreT>>

    A DeepReadonly version of the result of the update function; i.e. the same object which has been set in the store.

  • Updates the ObservableStore based on the current values in the store.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • updateFunction: (storeData: DeepReadonly<StoreDataT>) => Partial<StoreDataT>

      A function which takes the current data of the store and returns an object with a subset (Partial) of the fields. This is a looser typing than a Pick, in turn giving less information about the return type. Also, if you do not use exactOptionalPropertyTypes: true, be careful not to break the types by explicitly setting an undefined value in an optional field. The calculated fields will be updated in the store, and any Observables will be triggered as if the values had been set with set.

        • (storeData: DeepReadonly<StoreDataT>): Partial<StoreDataT>
        • Parameters

          • storeData: DeepReadonly<StoreDataT>

          Returns Partial<StoreDataT>

    Returns DeepReadonly<Partial<StoreDataT>>

    A DeepReadonly version of the result of the update function; i.e. the same object which has been set in the store.

  • Updates the ObservableStore asynchronously based on the current values in the store. This is useful if you need functionality such as "add an item to an existing array in the store". (Remember that the store values should be treated as immutable, so in this example, you should .concat rather than .push).

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • updateFunction: (storeData: DeepReadonly<StoreDataT>) => Promise<Pick<StoreDataT, KeyInStoreT>>

      A function which takes the current data of the store and returns a Promise of a subset (Pick) of the fields. Once the Promise fulfills, the calculated fields will be updated in the store, and any Observables will be triggered as if the values had been set with set.

        • (storeData: DeepReadonly<StoreDataT>): Promise<Pick<StoreDataT, KeyInStoreT>>
        • Parameters

          • storeData: DeepReadonly<StoreDataT>

          Returns Promise<Pick<StoreDataT, KeyInStoreT>>

    Returns Promise<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>

    A DeepReadonly version of the result of the update function; i.e. the same Promised object which will be set in the store.

  • Updates the ObservableStore asynchronously based on the current values in the store. This is useful if you need functionality

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • updateFunction: (storeData: DeepReadonly<StoreDataT>) => Promise<Partial<StoreDataT>>

      A function which takes the current data of the store and returns a Promise of a subset (Partial) of the fields. This is a looser typing than a Pick, in turn giving less information about the return type. Also, if you do not use exactOptionalPropertyTypes: true, be careful not to break the types by explicitly setting an undefined value in an optional field. Once the Promise fulfills, the calculated fields will be updated in the store, and any Observables will be triggered as if the values had been set with set.

        • (storeData: DeepReadonly<StoreDataT>): Promise<Partial<StoreDataT>>
        • Parameters

          • storeData: DeepReadonly<StoreDataT>

          Returns Promise<Partial<StoreDataT>>

    Returns Promise<DeepReadonly<Partial<StoreDataT>>>

    A DeepReadonly version of the result of the update function; i.e. the same Promised object which will be set in the store.

bindToFormControl

  • bindToFormControl<KeyInStoreT>(key: KeyInStoreT, formControl: FormControlLike): SubscriptionLike
  • bindToFormControl<KeyInStoreT>(key: KeyInStoreT, formControl: FormControlLike, until: Observable<unknown>): void
  • Angular-specific utility method binding a given FormControl(Like) to a key in the store. The FormControl will be initialized with the current value in the store, and will then be kept in sync with the store, updating each other as changes happen in one or the other.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT

      The store key to bind to.

    • formControl: FormControlLike

      An Angular FormControl. It is assumed that the formControl values will be of the correct type for the store.

    Returns SubscriptionLike

    A SubscriptionLike which must be used to unsubscribe the binding when the FormControl is disposed of.

  • Angular-specific utility method binding a given FormControl(Like) to a key in the store. The FormControl will be initialized with the current value in the store, and will then be kept in sync with the store, updating each other as changes happen in one or the other.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT

      The store key to bind to.

    • formControl: FormControlLike

      An Angular FormControl. It is assumed that the formControl values will be of the correct type for the store.

    • until: Observable<unknown>

      An Observable which signals when this binding should be disconnected. Typically, this will be an Observable signaling when the Angular component is being destroyed.

    Returns void

getValue

  • getValue(): DeepReadonly<StoreDataT>
  • Returns the current value of the internal data.

    Returns DeepReadonly<StoreDataT>

observe

  • observe<KeyInStoreT>(key: KeyInStoreT): Observable<DeepReadonly<StoreDataT[KeyInStoreT]>>
  • observe<KeyInStoreT>(key: KeyInStoreT, ...additionalKeys: KeyInStoreT[]): Observable<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>
  • observe<KeyInStoreT>(keys: KeyInStoreT[]): Observable<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>
  • Returns an Observable which emits the values for the given key as they are updated.

    If an observed field is of an object type, e.g. MyInterface, the returned value will be of utility type DeepReadonly<MyInterface>. (If the returned object was not immutable, it would be possible to manipulate the internal state of the ObservableStore by reference without triggering change notifications).

    This is essentially a shorthand for

    observableStore.pipe(
    map(data => {
    const o = data.key;
    return o as DeepReadonly<typeof o>;
    }),
    distinctUntilChanged((a, b) => deepEquals(a, b))
    );

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT

    Returns Observable<DeepReadonly<StoreDataT[KeyInStoreT]>>

  • Returns an Observable of an object consisting of the specified fields.

    If an observed field is of an object type, e.g. MyInterface, the returned value will be of utility type DeepReadonly<MyInterface>. (If the returned object was not immutable, it would be possible to manipulate the internal state of the ObservableStore by reference without triggering change notifications).

    This is essentially a shorthand for

    observableStore.pipe(
    map(data => {
    const o = {
    k1: data.k1,
    k2: data.k2
    };
    return o as DeepReadonly<typeof o>;
    }),
    distinctUntilChanged((a, b) => deepEquals(a, b))
    );

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT
    • Rest ...additionalKeys: KeyInStoreT[]

    Returns Observable<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>

  • Returns an Observable of an object consisting of the specified fields, given as an array.

    If an observed field is of an object type, e.g. MyInterface, the returned value will be of utility type DeepReadonly<MyInterface>. (If the returned object was not immutable, it would be possible to manipulate the internal state of the ObservableStore by reference without triggering change notifications).

    This is equivalent to

    observableStore.pipe(
    map(data => {
    const o = {
    k1: data.k1,
    k2: data.k2
    };
    return o as DeepReadonly<typeof o>;
    }),
    distinctUntilChanged((a, b) => deepEquals(a, b))
    );

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • keys: KeyInStoreT[]

    Returns Observable<DeepReadonly<Pick<StoreDataT, KeyInStoreT>>>

observePairwise

  • observePairwise<KeyInStoreT>(key: KeyInStoreT): Observable<[previous: DeepReadonly<StoreDataT[KeyInStoreT]>, current: DeepReadonly<StoreDataT[KeyInStoreT]>]>
  • observePairwise<KeyInStoreT>(key: KeyInStoreT, ...additionalKeys: KeyInStoreT[]): Observable<[previous: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>, current: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>]>
  • observePairwise<KeyInStoreT>(keys: KeyInStoreT[]): Observable<[previous: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>, current: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>]>
  • As observe, but emits a tuple of [previous, current] values. previous will be undefined at the first emit.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT

    Returns Observable<[previous: DeepReadonly<StoreDataT[KeyInStoreT]>, current: DeepReadonly<StoreDataT[KeyInStoreT]>]>

  • As observe, but emits a tuple of [previous, current] values. previous will be undefined at the first emit.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT
    • Rest ...additionalKeys: KeyInStoreT[]

    Returns Observable<[previous: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>, current: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>]>

  • As observe, but emits a tuple of [previous, current] values. previous will be undefined at the first emit.

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • keys: KeyInStoreT[]

    Returns Observable<[previous: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>, current: DeepReadonly<Pick<StoreDataT, KeyInStoreT>>]>

set

  • set<KeyInStoreT>(key: KeyInStoreT, value: StoreDataT[KeyInStoreT] | DeepReadonly<StoreDataT[KeyInStoreT]>): void
  • set<KeyInStoreT>(keyValueObject: Pick<StoreDataT, KeyInStoreT> | DeepReadonly<Pick<StoreDataT, KeyInStoreT>>): void
  • Sets a given field to a given value. If the new value is not equal to the current value, it will trigger a notification in the relevant Observables. (See observe)

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • key: KeyInStoreT

      The name of the field. Must be a field in type StoreDataT

    • value: StoreDataT[KeyInStoreT] | DeepReadonly<StoreDataT[KeyInStoreT]>

      The new value. Must be of the appropriate type.

    Returns void

  • Sets several fields at once. If any of the new values are not equal to the current value, it will trigger a notification in the relevant Observables. (See observe)

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • keyValueObject: Pick<StoreDataT, KeyInStoreT> | DeepReadonly<Pick<StoreDataT, KeyInStoreT>>

      An object containing key/value pairs to set. The object must be a subset (Pick) of type StoreDataT

    Returns void

setParamMap

  • setParamMap<KeyInStoreT>(params: ParamMapLike, ...keys: KeyInStoreT[]): Pick<StoreDataT, KeyInStoreT>
  • Angular-specific utility method which sets the given keys from a ParamMap-like object in the store, restricted to only the keys which are of type number, string or undefined in the ObservableStore (since they are the types which can reliably be expressed in the route without needing custom deserialization).

    example
    ngOnInit(): void {
    this.activatedRoute.paramMap
    .subscribe(paramMap => this.applicationState.setParamMap(paramMap, 'wantedUserId'));
    ...

    Type parameters

    • KeyInStoreT: string | number | symbol

    Parameters

    • params: ParamMapLike

      A ParamMaplike object, as obtained from Angular's ActivatedRoute.paramMap Observable.

    • Rest ...keys: KeyInStoreT[]

      The name of the keys to pick from the ParamMap and set in the ObservableStore.

    Returns Pick<StoreDataT, KeyInStoreT>