既然 Angular 是双向数据绑定，为什么我应该在 Angular 中使用 Redux？

据我了解，Redux 主要是为了在 javascript 应用程序中启用双向数据绑定。这对于非双向数据绑定的框架非常有用，例如 React。但为什么要在 Angular 中使用它，因为它本身就是双向数据绑定的？

为了说明我的问题，我在本机 Angular 中使用了代码来创建一个存储，以实现两个 Angular 组件之间的变量状态通信：

1) 商店

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class StoreService {
  customer: any;
  constructor() { }
}

这个商店是一个原生的 Angular 服务，我只声明变量 customer（是的，打字会更好，但我想尽可能缩短它）。

2）异步api服务e

import { Injectable } from '@angular/core';
import { StoreService } from './store.service'

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor( private store: StoreService ) { }

  getData() {
    setTimeout(()=> {
      this.store.customer = {
        name: 'Bob',
        age: 25
      }
    }, 2000);
  }
}

这个api服务只有一个方法getdata()异步检索客户数据。我可以用一个http.get方法，在本例中是里面的代码setTimeout将是中的代码next()可观察订阅的功能。 请注意，我直接在前一个存储中实例化异步过程的返回。

3）使用store的组件

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

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css']
})
export class MycomponentComponent implements OnInit {

  constructor(
    private api: ApiService,
    private store: StoreService
  ) { }

  ngOnInit() {

    this.api.getData();

  }
}

请注意，除了导入服务存储和 api 之外，我只使用一行代码，即调用数据的代码。如果其他组件或任何其他服务已经填充了商店，则此行将毫无用处（请参阅下面的第二个组件）

4）组件的HTML模板

<ul>
  <li>Name : {{store.customer?.name}}</li>
  <li>Age : {{store.customer?.age}}</li>
</ul>

请注意，我直接使用模板中的存储来确保与也导入同一存储的其他组件进行双向数据绑定。 注意 elvis 运算符的使用?.管理异步变量store.customer.

5) 另一个修改 store 的组件

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

@Component({
  selector: 'app-myothercomponent',
  templateUrl: './myothercomponent.component.html',
  styleUrls: ['./myothercomponent.component.css']
})
export class MyothercomponentComponent implements OnInit {   
  constructor(private store: StoreService) { }
}

我只导入商店，不需要任何其他代码行。

6）前一个组件的HTML模板

<p>
  <input type="text" [(ngModel)]="store.customer && store.customer.name">
</p>

请注意由于使用 ngModel 而处理异步的特殊方法。顺便说一下，考虑在 dorder 中导入 FormsModule 来处理 HTML 中的输入。

现在更改第二个组件中客户名称的值，您将在第一个组件中看到其直接且瞬时的更改。

Angular 的这种双向数据绑定非常强大，而且设置和使用起来非常简单，我真的很想知道为什么我应该使用 Redux 或 NgRx。你能解释一下为什么我应该这样做吗？

感谢帮助。

据我了解，Redux 主要是为了在 javascript 应用程序中启用双向数据绑定。这对于非双向数据绑定的框架非常有用，例如 React。但为什么要在 Angular 中使用它，因为它本来就已经是双向数据绑定了？

该陈述是错误的，因此该陈述之后的所有内容都基于对 Redux 解决问题的错误印象。

它与数据绑定无关，但您已经接近它解决的问题了。

Redux 解决了这个问题let x = {y: 2}; x.y = 3;隐藏值的突变，并且 JavaScript 应用程序中的其他所有内容都很难知道何时发生x.y变化。

从历史上看，使用过像 AngularJS 1.x 这样的框架watchers它将比较模板表达式与其之前的值以查看它是否已更改，但如果您的模板正在引用x和内在价值x.y发生了变化，那么观察者就看不到它。

React 只有单向数据绑定，但是suffers来自相同的副作用。如果你通过了x作为财产<MyComponent x={x}/>如果出现以下情况，组件将不会呈现更新：x.y变化。

Angular 也面临这个问题。

程序员解决这个问题的方法是克隆对象这样数据绑定就会看到突变正在发生变化，并将更改呈现到 DOM。

例如;

let x = {y:1};
let next = {...x, y:2};
console.log(x === next); // prints false

而不是直接变异x.y = 2上面的代码创建了一个具有新值的新对象，并且比较x和next价值收益false它告诉大多数框架（如 Angular 或 React）数据已更改，并且任何需要它的内容都应该更新。

那么这和 Redux 有什么关系呢？

Redux 是一个reducer框架。它基于使用减速器函数来执行上述工作的想法。的突变{...x, y:2}确实很简单，但 Redux 为开发人员提供了工具，让他们能够以更易于管理的方式做到这一点。例如，选择器和操作是抽象产生新变异值的工作的方法。

如果 JavaScript 能够看到这一点x !== x when x.y改变了，那么我们就不需要 Redux 了。