[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 ...
随机推荐
- Floodlight中 处理packetin消息的顺序(2)
前面通过阅读代码知道了怎样推断各个模块处理某个消息的先后顺序.那么内部是怎样实现的呢? 每当一个模块表示对一个消息感兴趣的时候,就会调用IFloodlightProviderSer ...
- Python Web框架Tornado的异步处理代码演示样例
1. What is Tornado Tornado是一个轻量级但高性能的Python web框架,与还有一个流行的Python web框架Django相比.tornado不提供操作数据库的ORM接口 ...
- 前台ajax验证技术采用正则表达式
var flag1,flag2,flag3,flag4,flag5,flag6=false; function val(obj) { var regBox = { /* regEmail : /^([ ...
- onvif开发总结
ONVIF开发经验总结 ONVIF开发经验总结............................................................................. ...
- POJ 2457 BFS
题意: 说人话: 从A到B连边 找从1到k的最短路 并输出路径(随便一条即可 ) 如果不能到达 输出-1 思路: 搜 //By SiriusRen #include <queue> #in ...
- POJ 2433 枚举
题意: 思路: 每回枚举去哪个山包 枚举的姿势很重要 //By SiriusRen #include <cstdio> #include <algorithm> using n ...
- 企业实战之部署Solarwinds Network八部众
企业实战之部署Solarwinds Network 网管系统八部众 Orion Network Performance Monitor是全面的带宽性能监控和故障管理软件,能监控并收集来自路由器.交换机 ...
- EF中执行Sql语句
Entity Framework是微软出品的高级ORM框架,大多数.NET开发者对这个ORM框架应该不会陌生.本文主要罗列在.NET(ASP.NET/WINFORM)应用程序开发中使用Entity F ...
- js中Array.prototype.push.call的用法
var arr = [] Array.prototype.push.call(arr,"a","b","c") <==> []. ...
- 深入了解"网上邻居"原理
说到“网上邻居”,相信很多人都很熟悉.但是说起“网上邻居”的工作机制,可能大家就不太清楚了. 要说“网上邻居”的工作机制,不妨联系一下生活中的例子:比如我(A),要拜访一个远方的朋友(B),我要去他的 ...