[Angular 2] Handle Reactive Async opreations in Service
When you use ngrx/store and you want to fire a service request. When it sucessfully return the response, you need to dispatch action to tell the store update.
So one pattern can be considered to follow is:
import {Http, Headers} from '@angular/http'; import {Injectable} from '@angular/core'; import {Store} from '@ngrx/store'; import {Observable} from "rxjs/Observable"; import 'rxjs/add/operator/map'; import {AppStore} from '../models/appstore.model'; import {Item} from '../models/item.model'; const BASE_URL = 'http://localhost:3000/items/'; const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) }; @Injectable() export class ItemsService { items: Observable<Array<Item>>; constructor(private http: Http, private store: Store<AppStore>) { this.items = store.select('items'); } loadItems() { this.http.get(BASE_URL) .map(res => res.json()) .map(payload => ({ type: 'ADD_ITEMS', payload })) .subscribe(action => this.store.dispatch(action)); } saveItem(item: Item) { return (item.id) ? this.updateItem(item) : this.createItem(item); } createItem(item: Item) { return this.http.post(`${BASE_URL}`, JSON.stringify(item), HEADER) .map(res => res.json()) .do(payload => { const action = { type: 'CREATE_ITEM', payload }; this.store.dispatch(action) }); } updateItem(item: Item) { return this.http.put(`${BASE_URL}${item.id}`, JSON.stringify(item), HEADER) .do(action => this.store.dispatch({ type: 'UPDATE_ITEM', payload: item })); } deleteItem(item: Item) { return this.http.delete(`${BASE_URL}${item.id}`) .do(action => this.store.dispatch({ type: 'DELETE_ITEM', payload: item })); } }
In this ItemService, we get Items from store:
items: Observable<Array<Item>>; constructor(private http: Http, private store: Store<AppStore>) { this.items = store.select('items'); }
To change state, it flows the style that
- Call the backend
- if success generate action
- dispatch the action
createItem(item: Item) { return this.http.post(`${BASE_URL}`, JSON.stringify(item), HEADER) .map(res => res.json()) .do(payload => { const action = { type: 'CREATE_ITEM', payload }; this.store.dispatch(action) }); }
In the controller:
saveItem(item: Item) { this.itemsService.saveItem(item) .subscribe( (res) => {this.resetItem()}, (err) => {console.error(err)}, () => {console.info("Completed")});
If you notice, in loadItems, I didn't' use do() to dispatch action and subscribe in controller, instead I subscribe in service, this is because in controller, it doesn't expect receive anything from service:
constructor(private itemsService: ItemsService, private gadgetService: GadgetService, private store: Store<AppStore>) { this.items = itemsService.items; itemsService.loadItems(); }
We base on async pipe to update the dom:
<items-list [items]="items | async" (selected)="selectItem($event)" (deleted)="deleteItem($event)"> </items-list>
But for createItem, deleteItem, we use do() to dispatch action and subscribe action, this is because we want to confrim weather it successfully updated, then we want to clear the input fields.
相关文章
- Microsoft.Bcl.Async 使用总结--在.NET Framework 4.5项目上使用.NET Framework 4.5版本及以上版本才可以使用C# 5中的async/await异步特性
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular] Test Container component with async provider
- [Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
- [Angular 2] Rendering an Observable with the Async Pipe
- [Angular] In angular world and out angular world
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular] ChangeDetection -- onPush
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- Angular Schematics 学习笔记
- Angular里ngModel双向绑定的一个使用例子
- 如何处理Angular应用的错误消息: No pipe found with name async