Escrito el 11/08/2024

NGRX Store - Effects: Entities

Tener una lista de objetos en el store no es muy conveniente porque hay que hacer búsquedas todo el tiempo. Para solucionarlo se crea un objeto con el id como propiedad y el objeto de la lista como valor

Antes

Definición

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

Ejemplo

{
  data: [
    { id: 1, name: "Product 1" },
    { id: 2, name: "Product 2" },
    { id: 3, name: "Product 3" },
    { id: 4, name: "Product 4" },
  ],
  loaded: true,
  loading: false
}

Después

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

Ejemplo

{
  data: {
    1: { id: 1, name: 'Product 1' },
    2: { id: 2, name: 'Product 2' },
    3: { id: 3, name: 'Product 3' },
    4: { id: 4, name: 'Product 4' },
  },
  loaded: true,
  loading: false
}

Nota 1: Esto se llama object lookup.

Operaciones

Agregar

const newData = {...};
const newDataList = {
  ...newDataList,
  [newData.id] : newData
};
const final = {
  data: newDataList,
  loaded: true,
  loading: false
}

Actualizar

const newData = {...};
const newDataList = {
  ...newDataList,
};
newDataList[newData.id] = newData;
const final = {
  data: newDataList,
  loaded: true,
  loading: false
}

Eliminar

const dataToEliminate = {...};
const { [dataToEliminate.id]: removed, ...others } = newDataList;
const final = {
  data: others,
  loaded: true,
  loading: false
}