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

RxJS allows you to combine streams in various ways. This lesson shows you how to take a click stream and combine it with a store stream to use a value from the store inside a reducer.

[00:00] Finally, since we don't want all of our time travelers lost somewhere in time, we want to be able to recall them to the current time that we have here. Let's go ahead and set up a button to recall. Let's call it recall, handle its clicks, and we'll say recall next, as usual. We'll set up the subject for that, recall, it's a new subject.

[00:31] Our recalls are going to be mapped to, or using with the other store, using with latest from. That looks like this, where you say, we'll just do it in the merge. We'll say this.recall with latest from, and we want to get the latest from the time. The store selected clock, we want to get the latest from that time and use that.

[01:03] The way we do that is the next parameter here is a function where the first argument would be the latest value from this and the next argument would be the latest value from this.

[01:15] We're not going to use the first argument, and when you don't use the first argument, you, just as a convention, underscore, saying, "Hey, I'm not going to use that, so don't worry about it. But I do want to use the second one."

[01:29] If you're going to use both of them, you usually say XY or name them something and combine them somehow. But I'm not going to use the first one, so I'm just going to say underscore just to let them know I'm not going to use it. I'm just going to push out Y, meaning pushing out the time.

[01:43] I'll go ahead and map that. This is the time, remember the time is coming from this, which is the second argument here, which is projected pushed out here, and now is the time. When I map this to a type -- let's surround this with parens before I forget -- of recall and a payload of time.

[02:08] We need to create recall, so let's go ahead and import it. I also need to import before I forget, with latest from, because it's an operator that's not yet imported.

[02:21] We'll go ahead and create the recall type. I'll just duplicate this. I'll rename these guys to recall.

[02:32] The recall will be done on the people, because I'll want to recall all of them. We'll say case recall. I'm going to return the state mapped where I go through each person.

[02:47] I'm going to return a new object where we grab the name is a person.name, and the time is the payload. Because remember, that payload coming through is coming through as the latest from time of this.time, which is the selected value of that clock.

[03:11] When I refresh and I'll start clicking on the people when they show up to move them ahead in time, move them ahead. Once I click recall, they'll all sync back to the current time that was up there, I'll click on Sarah, recall Sarah, click on Nancy. It's recalling all of them and pushing them to the current time.

Course

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

Use a Value from the Store in a Reducer

Share this video with your friends