@tanstack/angular-store を使ってみた

久々にTanStackのページをみていたら、TanStack Storeというのができていました。
さらに驚いたことにAngular版(@tanstack/angular-store)もありました。

早速、どんな感じか確認してみました。

@tanstack/angular-store を使ってみる

Store部

状態実装の部分。
このコードにはAngular的なコードは一切存在しません。
store.setState()で状態を更新します。
APIは最小限という感じ。

store.ts

import { Store } from '@tanstack/store';

export interface State {
  count: number;
}

export const store = new Store<State>({
  count: 0,
});

store.subscribe(() => {
  console.log('change state', store.state);
});

export function addCount(count: number) {
  return store.setState((state) => {
    return {
      ...state,
      count: state.count + count,
    };
  });
}

export function subCount(count: number) {
  return store.setState((state) => {
    return {
      ...state,
      count: state.count - count,
    };
  });
}

Angular部

injectStore()で状態を取りだします。

app.component.ts

import { Component } from '@angular/core';
import { injectStore } from '@tanstack/angular-store';
import { addCount, store, subCount } from './store';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `<div style="display: flex; gap: 8px">
    <button (click)="addCount(1)">+</button>
    <div>{{ $count() }}</div>
    <button (click)="subCount(1)">-</button>
  </div>`,
})
export class AppComponent {
  protected $count = injectStore(store, (state) => {
    return state.count;
  });
  public readonly addCount = addCount;
  public readonly subCount = subCount;
}

ソースコード

コードは以下Githubにあります。

https://github.com/monakamon/angular-tanstack-store

StackBlitzにデプロイしてみました😊

感想

本当に最小限のステートライブラリという感じ。
TanStackはAngular対応してくれるので嬉しい😀