[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;
    }
};

 

 

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