zoukankan      html  css  js  c++  java
  • [Angular] Reactive Store and AngularFire Observables

    A simple store implemenet:

    import { Observable } from 'rxjs/Observable';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    
    import 'rxjs/add/operator/pluck';
    import 'rxjs/add/operator/distinctUntilChanged';
    import {User} from './auth/shared/services/auth/auth.service';
    
    export interface State {
      user: User;
      [key: string]: any
    }
    
    const state: State = {
      user: undefined
    };
    
    export class Store {
    
      private subject = new BehaviorSubject<State>(state);
      private store = this.subject.asObservable().distinctUntilChanged();
    
      get value() {
        return this.subject.value;
      }
    
      select<T>(name: string): Observable<T> {
        return this.store.pluck(name);
      }
    
      set(name: string, state: any) {
        this.subject.next({ ...this.value, [name]: state });
      }
    
    }

    Using this store in AuthService:

    import {Injectable} from '@angular/core';
    import {AngularFireAuth} from 'angularfire2/auth';
    import {Store} from 'store';
    
    import 'rxjs/add/operator/do';
    
    export interface User {
      uid: string;
      email: string;
      authenticated: boolean;
    }
    
    @Injectable()
    export class AuthService {
    
      // handle on every auth state changes
      auth$ = this.af.authState
        .do(next => {
          if (!next) {
            this.store.set('user', null);
            return;
          }
          const user = {
            email: next.email,
            uid: next.uid,
            authenticated: true
          };
          this.store.set('user', user);
        });
    
      constructor(
        private af: AngularFireAuth,
        private store: Store
      ) {
    
      }
    
      createUser(email: string, password: string) {
        return this.af.auth.createUserWithEmailAndPassword(email, password);
      }
    
      loginUser(email: string, password: string) {
        return this.af.auth.signInWithEmailAndPassword(email, password)
      }
    }

    Using Reactive approach in app.component.ts:

    import {Component, OnDestroy, OnInit} from '@angular/core';
    import {Store} from 'store';
    import {AuthService} from '../../../auth/shared/services/auth/auth.service';
    
    import {Observable} from 'rxjs/Observable';
    import {Subscription} from 'rxjs/Subscription';
    import {User} from 'firebase/app';
    
    @Component({
      selector: 'app-root',
      styleUrls: ['app.component.scss'],
      template: `
        <div>
          <h1>{{user$ | async | json}}</h1>
          <div class="wrapper">
            <router-outlet></router-outlet>
          </div>
        </div>
      `
    })
    export class AppComponent implements OnInit, OnDestroy{
    
      user$: Observable<User>;
      subscription: Subscription;
    
      constructor(
        private store: Store,
        private authService: AuthService
      ) {}
    
      ngOnInit() {
        this.subscription = this.authService.auth$.subscribe();
        this.user$ = this.store.select<User>('user');
      }
    
      ngOnDestroy() {
        this.subscription.unsubscribe();
      }
    }
  • 相关阅读:
    s3c2440 移值u-boot-2016.03 第6篇 支持mtd yaffs 烧写
    s3c2440 移值u-boot-2016.03 第5篇 支持dm9000 识别
    s3c2440 移值u-boot-2016.03 第4篇 支持NAND flash 识别
    [转]MySQL数据库引擎
    [转]史上最全的MSSQL复习笔记
    [转]解析json:与array,list,map,bean,xml相互转化
    [转]Web程序员必须知道的 Console 对象里的九个方法
    大数据Spark超经典视频链接全集
    王家林 大数据Spark超经典视频链接全集[转]
    [转]WEB开发者必备的7个JavaScript函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7295342.html
Copyright © 2011-2022 走看看