앵귤러 고급 강좌 #5 NgRx 입문 — Store, Action, Reducer, Effect

Component ──dispatch(Action)──► Store ──► Reducer(prev, action) ──► newState
   ▲                              │                                    │
   └──── select(Selector) ────────┴────────────────────────────────────┘

export interface Todo { id: number; title: string; done: boolean; }

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

export const initialTodosState: TodosState = {
  items: [],
  loading: false,
  error: null,
};

import { createAction, props } from '@ngrx/store';
import { Todo } from './todos.state';

export const loadTodos = createAction('[Todos] Load');
export const loadTodosSuccess = createAction(
  '[Todos] Load Success',
  props<{ items: Todo[] }>(),
);
export const loadTodosFailure = createAction(
  '[Todos] Load Failure',
  props<{ error: string }>(),
);

export const addTodo = createAction('[Todos] Add', props<{ title: string }>());
export const removeTodo = createAction('[Todos] Remove', props<{ id: number }>());

import { createReducer, on } from '@ngrx/store';
import { initialTodosState } from './todos.state';
import * as TodosActions from './todos.actions';

export const todosReducer = createReducer(
  initialTodosState,

  on(TodosActions.loadTodos, (state) => ({ ...state, loading: true, error: null })),
  on(TodosActions.loadTodosSuccess, (state, { items }) => ({
    ...state, loading: false, items,
  })),
  on(TodosActions.loadTodosFailure, (state, { error }) => ({
    ...state, loading: false, error,
  })),

  on(TodosActions.addTodo, (state, { title }) => ({
    ...state,
    items: [...state.items, { id: Date.now(), title, done: false }],
  })),
  on(TodosActions.removeTodo, (state, { id }) => ({
    ...state,
    items: state.items.filter((t) => t.id !== id),
  })),
);

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { TodosState } from './todos.state';

export const selectTodosState = createFeatureSelector<TodosState>('todos');

export const selectTodos = createSelector(selectTodosState, (s) => s.items);
export const selectLoading = createSelector(selectTodosState, (s) => s.loading);

export const selectRemainingCount = createSelector(
  selectTodos,
  (items) => items.filter((t) => !t.done).length,
);

import { Injectable, inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, of, switchMap } from 'rxjs';

import { TodosApi } from './todos.api';
import * as TodosActions from './todos.actions';

@Injectable()
export class TodosEffects {
  private readonly actions$ = inject(Actions);
  private readonly api = inject(TodosApi);

  loadTodos$ = createEffect(() =>
    this.actions$.pipe(
      ofType(TodosActions.loadTodos),
      switchMap(() =>
        this.api.fetchAll().pipe(
          map((items) => TodosActions.loadTodosSuccess({ items })),
          catchError((err) =>
            of(TodosActions.loadTodosFailure({ error: err.message })),
          ),
        ),
      ),
    ),
  );
}

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { provideStoreDevtools } from '@ngrx/store-devtools';

import { todosReducer } from './todos/todos.reducer';
import { TodosEffects } from './todos/todos.effects';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideStore({ todos: todosReducer }),
    provideEffects([TodosEffects]),
    provideStoreDevtools({ maxAge: 50, connectInZone: false }),
  ],
};

import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Store } from '@ngrx/store';

import * as TodosActions from './todos.actions';
import { selectLoading, selectRemainingCount, selectTodos } from './todos.selectors';

@Component({
  selector: 'app-todos-page',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (loading$ | async) {
      <p>불러오는 중…</p>
    } @else {
      @for (todo of (todos$ | async) ?? []; track todo.id) {
        <p>{{ todo.title }} <button (click)="remove(todo.id)">삭제</button></p>
      }
      <p>남은 할 일: {{ remaining$ | async }}</p>
    }
  `,
})
export class TodosPageComponent {
  private readonly store = inject(Store);

  protected readonly todos$ = this.store.select(selectTodos);
  protected readonly loading$ = this.store.select(selectLoading);
  protected readonly remaining$ = this.store.select(selectRemainingCount);

  ngOnInit() { this.store.dispatch(TodosActions.loadTodos()); }
  remove(id: number) { this.store.dispatch(TodosActions.removeTodo({ id })); }
}

import { computed, inject } from '@angular/core';
import {
  signalStore, withState, withComputed, withMethods, patchState,
} from '@ngrx/signals';

import { TodosApi } from './todos.api';
import { Todo } from './todos.state';

export const TodosStore = signalStore(
  { providedIn: 'root' },
  withState({ items: [] as Todo[], loading: false, error: null as string | null }),
  withComputed(({ items }) => ({
    remaining: computed(() => items().filter((t) => !t.done).length),
  })),
  withMethods((store, api = inject(TodosApi)) => ({
    async load() {
      patchState(store, { loading: true, error: null });
      try {
        const items = await api.fetchAllAsPromise();
        patchState(store, { items, loading: false });
      } catch (err: any) {
        patchState(store, { error: err.message, loading: false });
      }
    },
    add(title: string) {
      patchState(store, ({ items }) => ({
        items: [...items, { id: Date.now(), title, done: false }],
      }));
    },
  })),
);