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
时间: 2024-10-05 04:45:04