1. 程式人生 > >[Angular] Reactive Store and AngularFire Observables

[Angular] Reactive Store and AngularFire Observables

nts ext defined .com ces inject distinct wrap syn

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 [email protected]/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 [email protected]/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();
  }
}

[Angular] Reactive Store and AngularFire Observables