[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();
}
}
[Angular] Reactive Store and AngularFire Observables的更多相关文章
- angular reactive form
这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...
- [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- ...
- Angular Reactive Form-响应式表单验证
内建验证规则 Angular中提供了一些內建的Validators,这些验证规则可以在Template-Driven或Reactive表单中使用. 目前 Angular 支持的内建 validator ...
- Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
- Angular Reactive Form - 填充表单模型
setValue 使用setValue,可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值. 在分配任何表单控件值之前,setValue方法会彻底检查数据对 ...
- 手把手教你用ngrx管理Angular状态
本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理 :ngrx/store——Angular的响应式Redux.本文将会完成一个小型简单的Angular应用,最终代码可以在这 ...
- angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例
一.项目介绍 运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室 ...
- 2015,2016 Open Source Yearbook
https://opensource.com/yearbook/2015 The 2015 Open Source Yearbook is a community-contributed collec ...
- [AngularJS Ng-redux] Integrate ngRedux
Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually ...
随机推荐
- android 动态设置TextView值,例:金额添加
一说到动态递增设置TextView值,非常多人应该立即就想到起个线程,让后在线程中睡眠指定时间,使用handler发送消息更新TextView值! 这样是实现了动态递增设置TextView值可是效率不 ...
- Hive总结(五)hive日志
日志记录了程序执行的过程.是一种查找问题的利器. Hive中的日志分为两种 1. 系统日志,记录了hive的执行情况,错误状况. 2. Job 日志,记录了Hive 中job的运行的历史过程. 系统日 ...
- c#数据类型格式转换大全
来源:网络 1.DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 ...
- 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 ...
- PHP表单生成器,快速生成现代化的form表单,快速上手
form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...
- BZOJ3994: [SDOI2015]约数个数和(莫比乌斯反演)
Description 设d(x)为x的约数个数,给定N.M,求 Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M. Out ...
- Linux 关闭正在运行的程序---命令
Ctrl + C 终止 Ctrl + D 退出 Ctrl + S 挂起 Ctrl + Q 解挂 Ctrl + Z 强制结束
- Ubuntu 下安装 Python 虚拟环境
写在前面: 安装指南是在 Ubuntu 下面操作的.不同的 Linux 版本,安装指令不同.所以,该指南的某些指令对于像 CentOS 等非 Ubuntu 系统不适用. 为什么需要使用虚拟环境? 虚拟 ...
- Android开发之ConstraintLayout相对布局
介绍 一个 ConstraintLayout 是一个 ViewGroup 允许您以灵活的方式定位和调整小部件的方法. 注意: ConstraintLayout 作为支持库提供,您可以在API级别9(G ...
- JavaScript学习总结(10)——实用JS代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event. ...