[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

时间: 2024-10-05 04:45:04

[Angular 2] Using a Reducer to Change an Object's Property Inside an Array的相关文章

spring webservice 搭建出现的异常处理。异常: NAMESPACE_ERR: An attempt is made to create or change an object in a way whi

异常:NAMESPACE_ERR: An attempt is made to create or change an object in a way whi---- 这是我自己写客户端调用webservice 控制台显示的部分异常代码. 或者直接通过soapUI 调用: 异常信息如下 No adapter for endpoint [public org.jdom.Element com.mycompany.hr.ws.HolidayEndpoint.handleHolidayRequest(

NAMESPACE_ERR: An attempt is made to create or change an object in a way which is incorrect with regard to namespaces.

解决办法: http://stackoverflow.com/questions/4037125/namespace-err-an-attempt-is-made-to-create-or-change-an-object-in-a-way-which-i http://docs.spring.io/spring-ws/site/faq.html#namespace_err I get NAMESPACE_ERR exceptions when using Spring-WS. What can

js常用代码大全

Javascript常用代码大全 //打开模式对话框 <body><script language=javascript> function doSelectUser(txtId){ strFeatures="dialogWidth=500px;dialogHeight=360px;center=yes;middle=yes ;help=no;status=no;scroll=no"; var url,strReturn; url="selUser.a

PHP 使用用户自定义的比较函数对数组中的值进行排序

原文:PHP 使用用户自定义的比较函数对数组中的值进行排序 usort (PHP 4, PHP 5) usort —      使用用户自定义的比较函数对数组中的值进行排序 说明 bool usort        ( array &$array       , callable $cmp_function       ) 本函数将用用户自定义的比较函数对一个数组中的值进行排序.如果要排序的数组需要用一种不寻常的标准进行排序,那么应该使用此函数. Note: 如果两个成员比较结果相同,则它们在排

Constants in C++

The first motivation for const seems to have been to eliminate the use of preprocessor #define for value substitution. It has since been put to use for pointers, function arguments, return types, class objects and member functions. (Page 334) 1 Value

[Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE

Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, Zone will notify change detection to kick in. Images we have 5000 svg box displaying on the screen. And each svg elements and three event listener on

[Angular 2] ngrx/store

@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management in your Angular 2 applications. This lesson takes an

Angular:OnPush变化检测策略介绍

在OnPush策略下,Angular不会运行变化检测(Change Detection ),除非组件的input接收到了新值.接收到新值的意思是,input的值或者引用发生了变化.这样听起来不好理解,看例子: 子组件接收一个balls(别想歪:))输入,然后在模板遍历这个balls数组并展示出来.初始化2秒后,往balls数组push一个new ball: //balls-list.component.ts @Component({ selector: 'balls-list', templat

Angular单元测试与E2E测试

本文介绍了Angular单元测试和E2E测试的配置与测试方法.示例APP使用Angular 7 CLI创建,已配置好基础测试环境,生成了测试样例代码.默认,Angular单元测试使用Jasmine测试框架和Karma测试运行器,E2E测试使用Jasmine测试框架和Protractor端到端测试框架. 配置单元测试 Jasmine是一个用于测试JavaScript的行为驱动开发框架,不依赖于任何其他JavaScript框架.Karma是测试运行器,为开发人员提供了高效.真实的测试环境,支持多种浏