Angular

import { Component, DestroyRef, inject } from '@angular/core';
import { create } from '@ilokesto/state/angular';

const useCounter = create({ count: 0, label: 'Clicks' });

@Component({ selector: 'counter-view', template: `<button (click)="inc()">{{ label() }}: {{ count() }}</button>` })
export class CounterView {
  private destroyRef = inject(DestroyRef);
  private countResult = useCounter((state) => state.count, { destroyRef: this.destroyRef });
  private labelResult = useCounter((state) => state.label, { destroyRef: this.destroyRef });

  count = this.countResult.state;
  label = this.labelResult.state;
  inc = () => this.countResult.setState((state) => ({ ...state, count: state.count + 1 }));
}

import { create } from '@ilokesto/state/angular';

type Action = { type: 'increment' } | { type: 'reset' };

const reduce = (state: { count: number }, action: Action) => {
  if (action.type === 'increment') return { count: state.count + 1 };
  if (action.type === 'reset') return { count: 0 };
  return state;
};

const useCounter = create(reduce, { count: 0 });

export class ReducerCounter {
  private result = useCounter((state) => state.count);
  count = this.result.state;
  increment = () => this.result.dispatch({ type: 'increment' });
}

const count = useCounter.readOnly((state) => state.count);
const dispatch = useCounter.writeOnly();
dispatch({ type: 'reset' });