This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Adding a Second Reducer to the Store

2:33 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Nicholas

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?

Avatar
Nathan Brenner

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.

Avatar
doug

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?

Now let's add some people to our application. We'll set up a people reducer. Over time, you'll get very familiar with this syntax. We have a state and a type and a payload. Then you switch based on that type. You'll always want to have a default that's going to return the state if the type didn't match anything. Just going to format this real quick.

Let's go ahead and do the same thing up in our previous reducer. We have a default instead of falling through to returning the state. It doesn't really change anything, makes it more consistent that way. All of your reducers will start with this template of a function that has a state and an action.

Then you switch on the action type, and by default, it returns a state. Then you'll set up all of these different types to switch on. The default for my people state is going to an array. I'm going to pull that out right here and call it default people.

Then our people are going to have a name, start with Sarah, and a time. We'll start with an empty time. I'll duplicate these. Give us four people -- John, Nancy, and Drew. Now the default for this state can be our default people.

To access this reducer, we come into our main. We grab people from the reducers. We pass it into this object here. Then in our app, our store now has access to the people's reducer. If we say people and this.people is store select people, then up in our template, we'll turn the clock back on.

We'll have a div that does an NG for person of people. This is coming from the store, so this is asynchronous. Make sure to add that asynch pipe or it's not going to work. Then we'll see person.name is in person.time.

Let's save. I'll refresh here. You can see now we have Sarah is in blank. John is in blank. That's because all of our reducers have times that are empty.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?