尝试使用Angular和RXJS创建一个简单的存储系统

2 年 ago
清, 宇
3 minutes

首先

注意！这不是关于Flux模式的文章！

由于Vue的人气暂时停滞不前，为了推动Angular的发展，我们需要发布一些内容！！

我会使用Angular+RXJS的BehaviorSubject来创建一个简单的存储库。

环境

    • angular-cli 6.2.2

 

    • angular ^6.1.0

 

    rxjs ~6.2.0

服务定义

首先，可以开始使用 “ng new” 命令或其他方式，准备好能够编写 Angular 的开发环境。

然后在src/app内创建一个名为core的文件夹。

在其中，我们立即编写StoreService。此服务使用BehaviorSubject来保存User类型。除了只传播BehaviorSubject的流之外，还使用保持最后传播的值的功能。

我們也會把它作為Observable來觀察。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

// 何の変哲もないユーザー型
export interface User {
  id: number;
  name: string;
}

// Storeサービス
@Injectable({
  providedIn: 'root',
})
export class StoreService {
  // 直接アクセスされるのは避けたいのでprivate
  private userSource = new BehaviorSubject<User>({
    id: 0,
    name: 'knight',
  });

  // Observable value
  user$ = this.userSource.asObservable();

  // Getter & Setter
  get user(): User {
    return this.userSource.getValue();
  }
  set user(value: User) {
    this.userSource.next(value);
  }
}

接下来，我们将创建一个名为CoreModule的模块来提供这项服务。该模块被限制只能从AppModule中调用，即它是单例模式。

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
})
export class CoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule,
  ) {
    if (parentModule) {
      throw new Error(`${parentModule} has already been loaded. Import Core module in the AppModule only.`);
    }
  }
}

组件定义

接下来，我们将从core目录中创建一个名为AComponent的组件，利用StoreService进行操作。

这个组件通过注入StoreService来引用存储。

使用点击事件触发并获取的 GET 版本，以及观察型的 Observable 版本，这两种方法都可以获取用户。

import { Component } from '@angular/core';
import { StoreService, User } from '../core/store.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-a',
  template: `
    <h2>Get版</h2>
    <ng-container *ngIf="user">
      <dl class="list">
        <dt>ID:</dt><dd>{{ user.id }}</dd>
        <dt>NAME:</dt><dd>{{ user.name }}</dd>
      </dl>
    </ng-container>
    <button (click)="onGetUser()">GET USER</button>
    <div class="divider"></div>
    <h2>Observable版</h2>
    <ng-container *ngIf="user$ | async as u">
      <dl class="list">
        <dt>ID:</dt><dd>{{ u.id }}</dd>
        <dt>NAME:</dt><dd>{{ u.name }}</dd>
      </dl>
    </ng-container>
  `,
  styles: [
    `
      .list {
        margin: 8px;
        display: flex;
      }

      dt {
        font-weight: bold;
      }

      dd {
        margin-right: 16px;
      }

      .divider {
        width: 100%;
        margin: 16px 0;
        border-bottom: solid 1px #000;
      }
    `
  ]
})
export class AComponent {
  user$: Observable<User>;
  user: User = null;

  constructor(private store: StoreService) {
    this.user$ = this.store.user$;
  }

  onGetUser() {
    this.user = this.store.user;
  }
}

为了确认是否能正确观测到AComponent（用户$），我们在AppComponent的ngOnInit()方法中，将在5秒后更新用户信息。

import { Component, OnInit } from '@angular/core';
import { StoreService, User } from './core/store.service';

@Component({
  selector: 'app-root',
  template:
  `
    <div>
      <app-a></app-a>
    </div>
  `,
  styles: []
})
export class AppComponent implements OnInit {
  constructor(private store: StoreService) {}

  ngOnInit() {
    setTimeout(() => {
      this.store.user = {
        id: 1,
        name: 'spidey',
      };
    }, 5000);
  }
}

我只是在阅读CoreModule，但也将AppModule附上。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AComponent } from './a/a.component';

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行

$: ng serve
image.png

应该会以那种方式显示。

上述的截图是5秒之前的版本，但在5秒后，Observable版本将在AppComponent中被更新为{id:1, name: spidey}。

最後

我觉得虽然这篇文章似乎有点毫无意义，但如果应用起来，也许可以把所有的状态都观测到。

虽然Angular的版本已经达到了6（很快将推出7），我觉得它已经摆脱了2系初期的混乱，所以希望它能够像Vue和React一样受到更多的欢迎。

bannerAds