[Angular 2] Using a Value from the Store in a Reducer

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.

The logic is when we click the recall button, it will reset all the people's time to the current time.

First, bind the click event to recall$:

<button (click)="recall$.next()">Recall</button>

...

recall$ = new Subject();

We get the latest time from the time stroe:

    constructor(store:Store) {

        this.time = store.select('clock');

        this.people = store.select('people');

        Observable.merge(

            this.click$,

            this.seconds$,

            this.person$,

            this.recall$

                .withLatestFrom(this.time, (_, y) => y) // _: means don't need to care about the first param which is this.recall$

                .map( (time) =>  ({type: RECALL, payload: time}))

            )

            .subscribe(store.dispatch.bind(store))

    }

_: is naming convention, it means, don't care about the first value.

Last, we handle the action in reducer:

        case RECALL:

            return state.map( (person) => {

                return {

                    name: person.name,

                    time: payload

                };

            })

-------------