Escrito el 06/08/2024

NGRX Store - Effects: Crear Reducer

Para crear los reducer primero hay que crear las interfaces y el estado inicial.

import * as fromProducts from "./product.actions";
import { Product } from "./product";

export interface ProductState {
  data: { [id: number]: Product };
  loaded: boolean;
  loading: boolean;
}

export const initialState: ProductState = {
  data: [],
  loaded: false,
  loading: false,
};

export function reducer(state: ProductState = initialState, action: fromProducts.ProductsAction): ProductState {
  switch (action.tyoe) {
    case fromProducts.LOAD_PRODUCTS: {
      return {
        ...state,
        loading: true,
      };
    }
    case fromProducts.LOAD_PRODUCTS_FAIL: {
      return {
        ...state,
        loading: false,
        loaded: false,
      };
    }
    case fromProducts.LOAD_PRODUCTS_SUCCESS: {
      return {
        ...state,
        loading: false,
        loaded: true,
        data: action.payload.reduce(
          (entities: { [id: number]: Product }, product: Product) => ({
            ...entities,
            [product.id]: product,
          }),
          {
            ...state.data,
          }
        ),
      };
    }
  }
  return state;
}