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();
}
}