Angular signal store

signal-store.ts

import { InjectionToken, Signal, signal } from '@angular/core';

export const signalStore = <T extends object>(
  initialState: T,
  opts: StoreOptions = {},
) => {
  const store = signal(initialState);

  const patch = (partial: Partial<T> | ((current: T) => T)) => {
    if (typeof partial === 'function') {
      store.update(partial);
    } else {
      store.update((current) => ({ ...current, ...partial }));
    }
  };

  return {
    create: <R extends Record<string, unknown>>(
      cb: (state: Signal<T>, patchState: typeof patch) => R,
    ) =>
      new InjectionToken('signal-store', {
        providedIn: opts.providedIn ?? null,
        factory: () => ({
          ...cb(store.asReadonly(), patch),
          reset: () => store.set(initialState),
        }),
      }),
  };
};

export type StoreOptions = {
  providedIn?: 'root' | null;
};

❤️‍🔥❤️‍🔥❤️‍🔥

Example:

const CountStore = signalStore({count: 0})
.create((state, patchState) => {
  const api = inject(CountService);

  const loadCount = api.loadCurrentCount().pipe(
    tap((count) => patchState({count}))
  ).subscribe();

  return {
       count: computed(() => state().count),
       increment: () => patchState(state => ({count: state.count + 1})),
       saveCount: () => api.saveCount(state().count)
     };
});