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

[Angular] Reactive Store and AngularFire Observables的更多相关文章

  1. angular reactive form

    这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...

  2. [Angular] Reactive Form -- FormControl & formControlName, FormGroup, formGroup & formGroupName

    First time dealing with Reactive form might be a little bit hard to understand. I have used Angular- ...

  3. Angular Reactive Form-响应式表单验证

    内建验证规则 Angular中提供了一些內建的Validators,这些验证规则可以在Template-Driven或Reactive表单中使用. 目前 Angular 支持的内建 validator ...

  4. Angular Reactive Forms -- Model-Driven Forms响应式表单

    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )  官方文档:https://v2.angul ...

  5. Angular Reactive Form - 填充表单模型

    setValue 使用setValue,可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值. 在分配任何表单控件值之前,setValue方法会彻底检查数据对 ...

  6. 手把手教你用ngrx管理Angular状态

    本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理 :ngrx/store——Angular的响应式Redux.本文将会完成一个小型简单的Angular应用,最终代码可以在这 ...

  7. angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

    一.项目介绍 运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室 ...

  8. 2015,2016 Open Source Yearbook

    https://opensource.com/yearbook/2015 The 2015 Open Source Yearbook is a community-contributed collec ...

  9. [AngularJS Ng-redux] Integrate ngRedux

    Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually ...

随机推荐

  1. android 动态设置TextView值,例:金额添加

    一说到动态递增设置TextView值,非常多人应该立即就想到起个线程,让后在线程中睡眠指定时间,使用handler发送消息更新TextView值! 这样是实现了动态递增设置TextView值可是效率不 ...

  2. Hive总结(五)hive日志

    日志记录了程序执行的过程.是一种查找问题的利器. Hive中的日志分为两种 1. 系统日志,记录了hive的执行情况,错误状况. 2. Job 日志,记录了Hive 中job的运行的历史过程. 系统日 ...

  3. c#数据类型格式转换大全

    来源:网络 1.DateTime   数字型         System.DateTime currentTime=new System.DateTime();    1.1 取当前年月日时分秒   ...

  4. Codefroces Educational Round 27 (A,B,C,D)

    A. Chess Tourney time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  5. PHP表单生成器,快速生成现代化的form表单,快速上手

    form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...

  6. BZOJ3994: [SDOI2015]约数个数和(莫比乌斯反演)

    Description  设d(x)为x的约数个数,给定N.M,求     Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M. Out ...

  7. Linux 关闭正在运行的程序---命令

    Ctrl + C 终止 Ctrl + D 退出 Ctrl + S 挂起 Ctrl + Q 解挂 Ctrl + Z 强制结束

  8. Ubuntu 下安装 Python 虚拟环境

    写在前面: 安装指南是在 Ubuntu 下面操作的.不同的 Linux 版本,安装指令不同.所以,该指南的某些指令对于像 CentOS 等非 Ubuntu 系统不适用. 为什么需要使用虚拟环境? 虚拟 ...

  9. Android开发之ConstraintLayout相对布局

    介绍 一个 ConstraintLayout 是一个 ViewGroup 允许您以灵活的方式定位和调整小部件的方法. 注意: ConstraintLayout 作为支持库提供,您可以在API级别9(G ...

  10. JavaScript学习总结(10)——实用JS代码大全

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...