【Angular】NgRxで状態管理を実装する方法

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import { Todo } from './todo.model';

export const TodosActions = createActionGroup({
  source: 'Todos',
  events: {
    'Load Todos': emptyProps(),
    'Load Todos Success': props<{ todos: Todo[] }>(),
    'Load Todos Failure': props<{ error: string }>(),
    'Add Todo': props<{ title: string }>(),
  },
});

import { createFeature, createReducer, on } from '@ngrx/store';
import { TodosActions } from './todos.actions';
import { Todo } from './todo.model';

interface TodosState {
  todos: Todo[];
  loading: boolean;
  error: string | null;
}

const initialState: TodosState = {
  todos: [],
  loading: false,
  error: null,
};

export const todosFeature = createFeature({
  name: 'todos',
  reducer: createReducer(
    initialState,
    on(TodosActions.loadTodos, (state) => ({ ...state, loading: true })),
    on(TodosActions.loadTodosSuccess, (state, { todos }) => ({
      ...state,
      todos,
      loading: false,
    })),
    on(TodosActions.loadTodosFailure, (state, { error }) => ({
      ...state,
      error,
      loading: false,
    })),
    on(TodosActions.addTodo, (state, { title }) => ({
      ...state,
      todos: [...state.todos, { id: Date.now(), title, done: false }],
    })),
  ),
});

providers: [
  provideStore(),
  provideState(todosFeature),
  provideEffects(TodosEffects),
],

import { Component, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { todosFeature } from './todos.reducer';
import { TodosActions } from './todos.actions';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  templateUrl: './todo-list.component.html',
})
export class TodoListComponent {
  private store = inject(Store);

  todos = this.store.selectSignal(todosFeature.selectTodos);
  loading = this.store.selectSignal(todosFeature.selectLoading);

  constructor() {
    this.store.dispatch(TodosActions.loadTodos());
  }

  addTodo(title: string) {
    this.store.dispatch(TodosActions.addTodo({ title }));
  }
}

import { Injectable, inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, of, switchMap } from 'rxjs';
import { TodosActions } from './todos.actions';
import { TodoService } from './todo.service';

@Injectable()
export class TodosEffects {
  private actions$ = inject(Actions);
  private todoService = inject(TodoService);

  loadTodos$ = createEffect(() =>
    this.actions$.pipe(
      ofType(TodosActions.loadTodos),
      switchMap(() =>
        this.todoService.getTodos().pipe(
          map((todos) => TodosActions.loadTodosSuccess({ todos })),
          catchError((error) => of(TodosActions.loadTodosFailure({ error: error.message }))),
        ),
      ),
    ),
  );
}