todos.store.tsx

export class TodoStore {
    readonly #todoService = inject(TodoService);
    query = signal('');
    todosResource = httpResource(() => ({
        url: '/api/todos',
        params: { q: this.query() },
        method: 'get',
    }), 
   // use a default value and parsing with Zod                              
   {defaultValue: [], parse: todoListSchema.parse});

    // computed properties for convenience
    todos = computed(() => this.todosResource.value());
    loading = computed(() => this.todosResource.isLoading()); 
    status = computed(() => this.todosResource.status());
    error = computed(() => this.todosResource.error());

    search(query: string) {
        this.query.set(query);
    }

    // all of these will be way simpler when we have HTTP mutation reactive APIs
    addTodo(todo: Todo) {
        // you can do an optimistic update
        this.todosResource.update(todos => [...todos, todo]);
        // or you can refetch after update success
        this.#todoService.addTodo(todo).subscribe(
            () => this.todosResource.reload(),
        );
    }

    deleteTodo(id: string) {
        this.todosResource.update(
            todos => todos.filter(todo => todo.id !== id)
        );
        this.#todoService.deleteTodo(id).subscribe(
            () => this.todosResource.reload(),
        );
    }
}

// in some HTML:
<div>
  <input [(ngModel)]="todoStore.query" />
  @for (todo of todoStore.todos; track todo.id) {
    <span>
      {{todo.title}} 
      <button (click)="todoStore.deleteTodo(todo.id)">
        Delete
      </button>
    </span>
  }
</div>