Add a Second Reducer to the Store

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet

Stores can accept as many reducers as you need. This lesson covers adding a second reducer that will be used to control an array of people.

Nicholas
Nicholas
~ 5 years ago

Just to clarify. Sorry but I haven't had the chance to set up your code or I could validate this myself. When the merged observable fires the store.dispatch then the current state is run through both reducers. Is that correct?

Nathan Brenner
Nathan Brenner
~ 5 years ago

There's some differences since Angular 2 has added on the module system.

In app.module.ts, import everything as shown and defaultPeople (you'll need to set that as an export in reducers.ts.

Then in @ngModule.imports, you'll need this for it to work with multiple reducers:

StoreModule.provideStore({clock: clock, people: people}, {clock: new Date(), people: defaultPeople})

The first argument of provide store is an object taking the names of the reducers with their value, which you've imported. The second argument is the default state, which even though you've already set that in the reducer function, you need to specify it here as well.

Doug Lasater
Doug Lasater
~ 4 years ago

Hey,

I was curious how one would solve for loading the default set of people defaultPeople from an api?

I saw some people using the ngrx/effects module and was wondering if this is the right approach or is there a better way?

Omar Qaddoumi
Omar Qaddoumi
~ 3 years ago

FYI, if you are using a newer version of Angular, you may get through the error:

Template parse errors: Parser Error: Unexpected token # at column 1 in [#person of people | async]

by using the following syntax:

ngFor="let person of people | async"