@ngrx/entity Yannick Baron @yannick_baron Software Architecture Consultant Managing collections with ease

• hold several entities • entities unique/identi fi able • can have an order • can be implemented by various data structures Collections

• add an entity, add many, ... • update an entity, update many, ... • remove entity, remove many, ... • read speci fi c entity, fi nd entities matching a condition, ... Operations on Collections

Immutable updates on arrays

// collection
 let collection: Entity[] = [...]; // item we want to add
 const newItem: Entity = { id: 'itemId', ... }; // simply appending to the end
 collection = collection.concat(newItem);
 collection = [...collection, newItem];
 
 // beware of duplicates + order Adding to the collection (array)

// collection
 let collection: Entity[] = [...]; // id we want to remove
 const removeId = 'itemId'; // filter the collection
 collection = collection.filter(item => item.id !== removeId); Removing from the collection (array)

// collection
 let collection: Entity[] = [...]; // item we want to update
 const updateId = 'itemId';
 const update: Partial = { foobar: 42 }; // map the collection
 collection = collection
 .map(item => item.id === updateId ? { ...item, ...update } : item); Updating an item in the collection (array)

// collection
 let collection: Entity[] = [...]; // id we are trying to find
 const target = 'itemId'; // find in the collection
 const item: Entity | undefined = collection.find(item => item.id === target); // worst case: iterates whole list without a match Read an item from the collection (array) by id

// collection
 let collection: Entity[] = [...]; // filter the collection
 const items = collection.filter(item => item.foobar >= 42); Find items in the collection (array) by condition

• many applications handle one or many collections of entities • always same/similar CRUD code • often similar logic in regards sorting + uniqueness of items → Abstraction possible! → @ngrx/entity provides the EntityAdapter Boilerplate? Repetition?

Introducing the EntityAdapter

• stateless class provided by the @ngrx/entity package • stores many entities ef fi ciently • provides methods and selectors to manage a collection immutably • agnostic, can be used in many contexts (Store, ComponentStore) → reduces boilerplate / repetition → keeps reducers small What is the EntityAdapter?

const entityAdapter = createEntityAdapter(); 
 
 // optionally provide id accessor and/or comparator
 const personAdapter = createEntityAdapter({
 selectId: ({ uid }) => uid,
 sortComparer: (p1, p2) => p1.foobar - p2.foobar,
 }); Creating an EntityAdapter

let collection = entityAdapter.getInitialState(); 
 
 // optionally initialise additional state properties
 let collection = createEntityAdapter({
 loading: false,
 }); Get the initial collection state

// add one
 const newItem: Entity = { id: 'item-1', ... };
 collection = entityAdapter.addOne(newEntity, collection);
 
 // remove one
 collection = entityAdapter.removeOne('item-2', collection);
 
 // update one
 const update: Update = {
 id: "item-2",
 changes: { foobar: 52 },
 }
 collection = entityAdapter.updateOne(update, collection); Update the collection

const { selectAll, selectTotal } = entityAdapter.getSelectors();
 
 const all = selectAll(collection);
 const count = selectTotal(collection); const { selectEntities, selectIds } = entityAdapter.getSelectors();
 
 const entity = selectEntities(collection)["item-1"];
 const ids = selectIds(collection); Read from the collection via selectors

• easy to use • reduces boilerplate / repetition • use with Store and ComponentStore → use it → make your life easier EntityAdapter

It's a wrap! @yannick_baron [email protected]