[Angular 2] Handle Reactive Async opreations in Service-白红宇

[Angular 2] Handle Reactive Async opreations in Service

阅读量：6958 次

发布时间：2019-06-27

本文共 3196 字，大约阅读时间需要 10 分钟。

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
     
      
       >;  constructor(private http: Http, private store: Store
       
        ) {    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
     
      
       >;  constructor(private http: Http, private store: Store
       
        ) {    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
     
      ) {    this.items = itemsService.items;    itemsService.loadItems();  }

We base on async pipe to update the dom:

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.

转载地址：http://lvmil.baihongyu.com/

你可能感兴趣的文章

GPS定位系统源码GPS定位系统 GPSBD专为二次开发而设计 ...