Classic NgRx Store

NgRx Store is the Redux pattern for Angular - powerful, but more complex.

NgRx Structure

store/
├── samurai.actions.ts    # Actions
├── samurai.reducer.ts    # Reducer
├── samurai.selectors.ts  # Selectors
├── samurai.effects.ts    # Effects (side effects)
└── samurai.state.ts      # State interface

Actions

import { createAction, props } from '@ngrx/store';

// Loading
export const loadSamurai = createAction('[Samurai] Load');
export const loadSamuraiSuccess = createAction(
  '[Samurai] Load Success',
  props<{ samurai: Samurai[] }>()
);
export const loadSamuraiFailure = createAction(
  '[Samurai] Load Failure',
  props<{ error: string }>()
);

// CRUD
export const addSamurai = createAction(
  '[Samurai] Add',
  props<{ samurai: Samurai }>()
);

export const deleteSamurai = createAction(
  '[Samurai] Delete',
  props<{ id: number }>()
);

Reducer

import { createReducer, on } from '@ngrx/store';

export interface SamuraiState {
  samurai: Samurai[];
  loading: boolean;
  error: string | null;
}

const initialState: SamuraiState = {
  samurai: [],
  loading: false,
  error: null
};

export const samuraiReducer = createReducer(
  initialState,

  on(loadSamurai, (state) => ({
    ...state,
    loading: true,
    error: null
  })),

  on(loadSamuraiSuccess, (state, { samurai }) => ({
    ...state,
    samurai,
    loading: false
  })),

  on(loadSamuraiFailure, (state, { error }) => ({
    ...state,
    loading: false,
    error
  })),

  on(addSamurai, (state, { samurai }) => ({
    ...state,
    samurai: [...state.samurai, samurai]
  })),

  on(deleteSamurai, (state, { id }) => ({
    ...state,
    samurai: state.samurai.filter(s => s.id !== id)
  }))
);