[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'll transform the the-the-approach state management in your Angular 2 applicatio Ns. This lesson takes a existing Angular 2 app and refactors it to utilize @ngrx/store, touching on all of the major concepts Along the way!

Link:https://github.com/btroncone/ngrx-store-in-ten

The approach I took is a little bit different from the one shown in Github.

People reducer:

For Perople Reducer, mainly three things:

• ADD person
• Remove person
• Toggle Person State

ExportConstPeople = (state = Defaultpeople, {type, payload}) = = {    Switch(type) { Casetoggle_state:returnState.map (person) = {                if(Person.name = = =payload.name) { Let State= person.state?!person.state:true; returnobject.assign ({}, person, {state}); }                returnPerson ;        });  CaseAdd_person:return[... state, {name:payload, Time:NewDate ()}];  CaseDelete_person:varindex =state.indexof (payload);            Console.log (index); return[... state.slice (0, index), ... state.slice (index+1),            ]; default:            returnState ; }};

Then on the interface, add input and buttons:

        <ul>            <Li[Style.textdecoration]= "Person.state?" ' Line-through ': ' None ' "(click)= "Person$.next (person)"*ngfor= "#person of people | Async">{{Person.name}} is in {{person.time | date: ' JMS '}}<Button(click)= "Deleteperson$.next (person)">Remove</Button>                <Button(click)= "togglestate (person)">Toggle</Button>            </Li>        </ul>        <BR>        <inputtype= "text"#personInp><Button(click)= "Addperson$.next (personinp.value); personinp.value=" ">Add</Button>

ADD Person:

    New Subject ()         = = ({Type:add_person, payload:person});

Here we create a Action: {Type:add_person, Payload:person}.

Dispatch the action:

        Observable.merge (
            ...              This . addperson$,
            ...            )            . Subscribe (Store.dispatch.bind (store))

Toggle Person:

For add person, we use Subject () to emit the event. For toggle person, we just use normal function to dispatch the action:

    togglestate (person) {        this. Store.dispatch ({type:toggle_state, Payload:person})    }

Filter:

Filter reducer Add function which is passed into the Array.filter () function:

Export Const FILTER = (state = person = + person, {type, payload}: {type: ""}) = {    Switch(type) { CaseShow_all:returnperson =Person ;  Caseshow_available:returnPerson =!person.state;  CaseShow_busy:returnperson =person.state; default:            returnState ; }}

Tamplete:

        <Button(click)= "All$.next ()">Show All</Button>        <Button(click)= "Available$.next ()">Show Available</Button>        <Button(click)= "Busy$.next ()">Show Busy</Button>

Use Subject:

    all$ = new Subject ()        . Mapto ({type:show_all});    available$ = new Subject ()        . Mapto ({type:show_available});    busy$ = new Subject ()        . Mapto ({type:show_busy});

Dispatch:

        Observable.merge (            this. person$,            this. addperson$,             this. deleteperson$,            this. available$,            this . all$,              This . busy$            )            . Subscribe (Store.dispatch.bind (store))

Update Store:

        this. People = observable.combinelatest (            the. People,            this . Filter,             = =                {return  people.filter (filter);            }        );

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

[Angular 2] Ngrx/store