Render an Observable with the Async Pipe

Render an Observable Date with the Async and  Date Pipes

Handle Click Events with Subjects

Handle Clicks and Intervals Together with Merge

Manage State in RxJS with StartWith and Scan

Map Streams to Values to Affect State

Use ngrx/store and Reducers for Angular Application State

Dispatch Action Types to Reducers

Dispatch Action Payloads to Reducers

Pass Template Input Values to Reducers

Pass Observables into Components with Async Pipe

Add a Second Reducer to the Store

Use Two Reducers Together

Use a Reducer to Change an Object's Property Inside an Array

Use a Value from the Store in a Reducer

Review of Angular 2, RxJS, and Reducers from ngrx/store

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

[00:00] Now I want to implement it so that if I click on a person, that it's going to advance them in time. We'll say like four hours or something, so when I click I want to have it advance. We'll say, "Person," next, so this person is going to be a subject.

[00:25] We're also going to need this person that gets clicked on so it's looping through the people and getting each individual person, so that we can check against that person and increment their time. I'm going to go ahead and map the value -- this is just like above -- to an object where the payload is the value.

[00:50] So this payload is this person that gets clicked on. Then the type is a type that we haven't created yet. I'm just going to call it "advance."

[01:02] I'm going to go ahead and import it, even though I haven't created it yet, advance. I'll hop over to my reducers. Going to duplicate this and name one called advance.

[01:19] Advance, and then we can check for advance inside of my people reducer. I'll say, "Case advance." Then I'm going to check on my state, and my state is all of the people.

[01:36] I want to return the state, but I'm going to return a new mapped version of this state where the map -- again, a mapping function goes through all of the people and does something with them, where by default, it's just going to return the person. So this would give us just a copy of that same state.

[02:01] If I were to refresh now, it would give us the same thing, but I want to check and see if the payload is the same as the person that's the current person as we map through. Then I don't want to return that same person. I want to return a new person or a new object where -- so we'll return object -- where the name is the person.name, but we want to change the time.

[02:32] We want the time to be something that uses our clock reducer, so our clock is going to take a state of person.time. Again, the person is holding on to a time originally from the clock and now we have that time that we can pass in as the state.

[02:51] Then we pass in a type and a payload. I'm going to say our type that we're going to pass in is hour. Then the payload is going to be, we'll advance them six hours each time.

[03:06] Now when I hit save and I refresh, you can see that when I click on a person, nothing happens. The reason is because I did not yet wire up my person as something that's merged into something that sends along a dispatch, so we'll say, "Person."

[03:29] It was getting clicked and it was mapped to this payload, but it wasn't sending that value anywhere, so that's why the store wasn't dispatching that. I'll go ahead and refresh again.

[03:41] Now when I click on one of the people, you can see that their time advances by six hours. Let's change that value to something else so it's not just a...I realize it's six. Lands on them on the same time almost, so I'll change it to five.

[03:58] Refresh again, and now you can see that whenever I click on these, they're advancing by five hours. The same clock reducer that we use to manage the main clock is also the clock reducer that we can use to manage the time of a person, or of these people, so sometimes there are scenarios where a reducer, I wouldn't even need to use it in the store.

[04:22] So it wouldn't get these type actions, right? Because right now I'm just sending the type manually. I'm not dispatching this through the store.

[04:31] If that's the case, if I didn't have this main clock and I just wanted to use this reducer as a helper for my people reducer, then I wouldn't have to register it inside of my main here. Because this is only for the stores and the store passing along those types. I could delete that and still just use that inside of my people reducer, but since I'm using my clock reducer for my main clock, I need to keep it in there or keep it in the provide store registration, where it will pass these types for the clock.

Course

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Use a Reducer to Change an Object's Property Inside an Array

Share this video with your friends