NgRx Reducer : src/app/reducers/hero.reducer.ts

hero.reducer.ts

import { HeroActions, HeroActionTypes } from "../actions/hero.actions";

import { Hero } from "../models/hero.model";

export interface HeroState {
  heroes: Hero[];
  hero: Hero;
  requesting: boolean;
  error: string;
}

export const initialState: HeroState = {
  heroes: [],
  hero: {} as Hero,
  requesting: false,
  error: ""
};

export function heroReducer(
  state = initialState,
  action: HeroActions
): HeroState {
  switch (action.type) {
    case HeroActionTypes.LoadHeroes:
      /*
        returning requesting true
        plus the rest of the state
      */
      return { ...state, requesting: true }; 
    case HeroActionTypes.LoadHeroesSuccess:
      /*
       returning requesting false and the payload assigned to the state heroes
       plus the rest of the state
      */
      return { ...state, heroes: action.payload, requesting: false };
    case HeroActionTypes.LoadHeroesFail:
      /*
       returning requesting false and the payload assigned to the state error
       plus the rest of the state
      */
      return { ...state, heroes: [], error: action.payload, requesting: false };
    case HeroActionTypes.CreateHero:
      return { ...state, requesting: true };
    case HeroActionTypes.CreateHeroSuccess:
      return {
        ...state,
        heroes: [...state.heroes, action.payload], // Immutable way, spread operator instead of push
        requesting: false
      };
    case HeroActionTypes.CreateHeroFail:
      return {
        ...state,
        error: action.payload,
        requesting: false
      };
    case HeroActionTypes.UpdateHero:
      return { ...state, requesting: true };
    // Not applicable on this app because this is a separate page
    case HeroActionTypes.UpdateHeroSuccess:
      return {
        ...state,
        heroes: state.heroes.map(hero =>
          hero.id === action.payload.id ? action.payload : hero // Immutable way, map instead of forEach
        ),
        requesting: false
      };
    // Not applicable on this app because this is a separate page
    case HeroActionTypes.UpdateHeroFail:
      return {
        ...state,
        error: action.payload,
        requesting: false
      };
    case HeroActionTypes.DeleteHero:
      return { ...state, requesting: true };
    case HeroActionTypes.DeleteHeroSuccess:
      return {
        ...state,
        heroes: state.heroes.filter(hero => hero.id !== action.payload), // Immutable way, filter instead of splice
        requesting: false
      };
    case HeroActionTypes.DeleteHeroFail:
      return {
        ...state,
        error: action.payload,
        requesting: false
      };
    default:
      return state;
  }
}