@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