在Angular 应用程序中,我们通常会这样做来管理共享状态:

import { BehaviorSubject } from 'rxjs';

interface User {
  id: number;
}

class UserService {
  private _users$ = new BehaviorSubject([]);

  users$ = this._users$.asObservable();

  deleteUser(user: User) {
    const users = this._users$.getValue();
    this._users$.next(users.filter(user => user.id !== user.id));
  }


  addUser(user: User) {
    const users = this._users$.getValue();
    this._users$.next([...users, user]);
  }


  updateUser(updatedUser: User) {
    const users = this._users$.getValue();
    this._users$.next(users.map(user => user.id === updatedUser.id ? updatedUser : user));
  }
}

这基本上解决了基于流量和基于Redux的模式(如ngRx和Redux本身)试图解决的同一个问题:我们如何更新共享状态,以便视图组件能够对更改做出react ,并始终能够显示真实的当前状态.但它比那些模式更简单.

我的问题是:这种模式有一个已知的名称吗?我们在使用像ngRx这样的库(甚至react中的redux)来覆盖这种模式的任何限制方面有什么优势吗?

推荐答案

这是一种有效的模式,这就是为什么我们还引入了ngrx/组件存储(https://ngrx.io/guide/component-store).

这些文件还提供了两种"方式"的利弊:https://ngrx.io/guide/component-store/comparison

Angular相关问答推荐

Transloco不加载Angular 17中的翻译

无法绑定到appendTo,因为它不是p-confirmPopup的已知属性

如何防止打印后的空格后的HTML元素的Angular ?

崩溃Angular项目Docker容器

根据环境变量动态加载Angular templateUrl

为什么初始化值为 1 的BehaviorSubject 不能分配给类型number?

获取 Angular 中所有子集合 firestore 的列表

Router.navigate() 在功能拦截器内不起作用

ngrx 效果等到从初始值以外的其他状态收到响应

Moment.js 和 Angular 库

过滤 ngfor Angular 的计数

Angular2 Pipes:输出原始 HTML

在同一个组件中使用 MatSort 的多个 mat-table

什么是 Angular 4,我可以从哪里了解更多信息?

如何在 ANGULAR 2 中提交表单时重置表单验证

在 webpack 构建中包含 git commit hash 和 date

如何在 Angular 应用程序中通过路由更改页面标题?

如何在 Angular 5 react式表单输入中使用管道

ng-template 上的 *ngFor 不输出任何内容

如何对 *ngFor 应用数量限制?