NgRx Entity és una biblioteca que forma part de l'ecosistema NgRx i està dissenyada per ajudar a gestionar col·leccions d'entitats en aplicacions Angular. Proporciona eines per simplificar operacions comunes com la selecció, actualització i eliminació d'entitats, així com la gestió de l'estat de càrrega.

• Comprendre què és NgRx Entity i per què és útil.
• Aprendre a configurar NgRx Entity en una aplicació Angular.
• Veure exemples pràctics d'ús de NgRx Entity per gestionar col·leccions d'entitats.
• Realitzar exercicis pràctics per reforçar els conceptes apresos.

NgRx Entity proporciona una sèrie de funcions i estructures de dades per gestionar col·leccions d'entitats de manera eficient. Les seves principals característiques inclouen:

• Normalització de dades: Emmagatzema les entitats en un format normalitzat per facilitar l'accés i la manipulació.
• Selectors: Proporciona selectors predefinits per accedir a les entitats i als seus estats.
• Reductors: Simplifica la creació de reductors per gestionar operacions comunes com l'addició, actualització i eliminació d'entitats.

Per començar a utilitzar NgRx Entity, primer cal instal·lar la biblioteca:

1. Definir el Model d'Entitat: Primer, definim el model de l'entitat que volem gestionar. Per exemple, si estem gestionant una col·lecció de llibres:

   export interface Book {
     id: string;
     title: string;
     author: string;
   }
   

2. Crear l'Adapter d'Entitat: Utilitzem createEntityAdapter per crear un adaptador per a la nostra entitat.

   import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
   
   export interface BookState extends EntityState<Book> {
     // Podem afegir altres propietats d'estat aquí
     selectedBookId: string | null;
   }
   
   export const adapter: EntityAdapter<Book> = createEntityAdapter<Book>();
   
   export const initialState: BookState = adapter.getInitialState({
     // Valors inicials per a altres propietats d'estat
     selectedBookId: null,
   });
   

3. Crear el Reductor: Utilitzem les funcions de l'adaptador per gestionar les operacions sobre les entitats.

   import { createReducer, on } from '@ngrx/store';
   import { Book } from './book.model';
   import { adapter, initialState, BookState } from './book.state';
   import * as BookActions from './book.actions';
   
   export const bookReducer = createReducer(
     initialState,
     on(BookActions.addBook, (state, { book }) => {
       return adapter.addOne(book, state);
     }),
     on(BookActions.updateBook, (state, { update }) => {
       return adapter.updateOne(update, state);
     }),
     on(BookActions.deleteBook, (state, { id }) => {
       return adapter.removeOne(id, state);
     }),
     // Altres accions...
   );
   

4. Selectors: NgRx Entity proporciona selectors predefinits per accedir a les entitats i als seus estats.

   import { createFeatureSelector, createSelector } from '@ngrx/store';
   import { adapter, BookState } from './book.state';
   
   export const selectBookState = createFeatureSelector<BookState>('books');
   
   const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();
   
   export const selectBookIds = createSelector(selectBookState, selectIds);
   export const selectBookEntities = createSelector(selectBookState, selectEntities);
   export const selectAllBooks = createSelector(selectBookState, selectAll);
   export const selectBookTotal = createSelector(selectBookState, selectTotal);
   

Definim les accions per gestionar les operacions sobre els llibres:

Un component que utilitza NgRx Entity per gestionar una col·lecció de llibres:

1. Crea una acció per afegir un llibre.
2. Modifica el reductor per gestionar l'acció d'afegir un llibre.
3. Actualitza el component per permetre afegir un llibre.

1. Crea una acció per actualitzar un llibre.
2. Modifica el reductor per gestionar l'acció d'actualitzar un llibre.
3. Actualitza el component per permetre actualitzar un llibre.

1. Crea una acció per eliminar un llibre.
2. Modifica el reductor per gestionar l'acció d'eliminar un llibre.
3. Actualitza el component per permetre eliminar un llibre.

NgRx Entity simplifica la gestió de col·leccions d'entitats en aplicacions Angular, proporcionant eines per normalitzar dades, crear selectors i gestionar operacions comunes. Amb aquesta eina, podem escriure codi més net i mantenible, millorant l'eficiència del desenvolupament.