[Angular 2] Using a Reducer to Change an Object's Property Inside an Array

標籤：

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.

 

So the logic is when we click on each person, the person‘s time will increase 3 hours:

 

First, add click event and yield the person object:

        <ul>            <li (click)="person$.next(person)" *ngFor="#person of people | async">                {{person.name}} is in {{person.time | date : ‘jms‘}}             </li>        </ul>...    person$ = new Subject()        .map( (person) => ({type: ADVANCE, payload: person}));

 

Then subscribe the person$, dispatch the action:

        Observable.merge(            this.click$,            this.seconds$,            this.person$            )            .subscribe(store.dispatch.bind(store))

 

In the reducer, we change the person‘s time by using clock() reducer:

export const people = (state = defaultPeople, {type, payload}) => {    switch(type){        case ADVANCE:            return state.map( (person) => {                if(person === payload){                    return {                        name: person.name,                        time: clock(payload.time, {type: HOUR, payload: 3})                    }                }                return person;            });        default:            return state;    }};

 

 

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

[Angular 2] Using a Reducer to Change an Object's Property Inside an Array