How to implement Generic reducer and action in NgRx

Question

I'm working on a Angular 9 app that uses the NGRX store and I'm new to NgRx. Could some one let me know how to develop a generic reducer/action where we don't need to write reducer and actions again and again. For an example I have userList and productLst which has similar kind of actions then how do we implement one generic list reducer/action and use it for both(userList and productLst)

satanTime satanTime · Accepted Answer · 2020-04-28T18:15:56

Unfortunately, to distinguish states, entities and actions every feature should have own state, reducers and actions.

But you can use @ngrx/data to reduce boilerplate: https://ngrx.io/guide/data

There's EntityCollectionServiceFactory that will create reducers and actions for you.

constructor(EntityCollectionServiceFactory: EntityCollectionServiceFactory) {
  this.heroService = EntityCollectionServiceFactory.create<Hero>('Hero');
  this.filteredHeroes$ = this.heroService.filteredEntities$;
  this.loading$ = this.heroService.loading$;
}

getHeroes() { this.heroService.getAll(); }
add(hero: Hero) { this.heroService.add(hero); }
deleteHero(hero: Hero) { this.heroService.delete(hero.id); }
update(hero: Hero) { this.heroService.update(hero); }

More info here: https://ngrx.io/guide/data/entity-collection-service#examples-from-the-demo-app

How to implement Generic reducer and action in NgRx

1 Answers