如何在Angular中使用redux绑定组件？

问题描述 投票：0回答：1

这里是一个微型应用程序，它通过商店作为本地Angular服务在两个组件之间共享异步变量。

[1）商店

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

这家商店是本机Angular服务，我只声明变量客户（是的输入会更好，但我想尽可能地缩短它）。

2）异步api服务

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）使用商店的组件

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）另一个用于修改商店的组件

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模板

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

请注意，由于使用了ngModel，因此处理异步的特殊方法。顺便说一下，要导入dorder中的FormsModule以处理HTML中的输入。

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

[但是有人告诉我，最好通过使用Redux存储（NgRx）以及在可观察对象的模板中使用@Input()/@Output()，ChangeDetectionStrategy.OnPush，|async等来完成此应用程序。我一直在寻找简化我的代码的方法，我想知道您如何通过这种Redux策略实现相同的迷你应用程序。因此，您可以在此处提供这种解决方案的代码吗？

感谢您的帮助。

angular redux store ngrx two-way-binding
1个回答
0
投票

没有将代码嵌入Angular中的Redux存储的代码，比将存储用作Angular的本机双向数据绑定服务要简单和有效。

如果您不同意，请在此处显示您的代码，上方是我的代码。

使用Redux在某种程度上或等同于在Angular的本机之上重新开发多余的双向数据绑定，对最终用户没有好处，但是极大地增加了代码的复杂性，并使其变得复杂取决于外部库Redux。

似乎人们在Angular中使用Redux时并不了解Angular服务的两种方式数据绑定的强大功能。通常，他们认为只能通过@ Input / @ Output使用两种方式进行数据绑定。尽管可能确实发生了无法避免@ Input / @ Output的情况，但在大多数情况下，依赖存储即服务是处理组件之间共享的变量的双向数据绑定的最佳方法。

[请务必理解我，任何Web应用程序都绝对需要商店，但是请Angular原生。如果Web应用程序是一棵树，则商店是主干，组件是分支。因此，您必须格外小心地构建商店，通过键入商店，对其进行记录，禁止开发人员添加变量而没有整个开发团队的认可和接受，从而构造商店。您无需使用Redux就可以做到这一点，而只需在开发团队中建立良好的做法和方法即可。这无疑是您的Web开发成功的关键。

关于可观察对象，即实际上是异步性的问题，Angular选择包括一些强大的语法来处理HTML模板中的异步变量，例如elvis运算符?.或类型="store.user && store.user.name"的表达式。这样做的目的是尽可能地避免使用可观察对象，而将注意力集中在最终用户实际等待的内容上：数据。 Angular处理异步的本机方式无需费心观察，它完全面向最终用户，其编码简单性在任何其他框架中都没有。就其他解决方案而言，这是Angular的主要优势之一。

现在，一个城市传说说，当应用程序变得复杂时，Angular的双向数据绑定不可靠，因此您需要使用Redux存储。因此，发明了功能最强大的javascript虚拟机（Chrome的Blink），还发明了Node.js和Angular的Google工程师将是javascript的新秀，但幸运的是，Redux的优秀专业人士来保存他们的错误代码。让我微笑... =：o）

现实是Google已经了解到，前端开发与其他任何框架或解决方案相比，昂贵的是两件事：双向数据绑定和异步处理（开发JQuery的老伙伴知道我在这里说）。无论使用哪种JavaScript技术，都必须以某种方式解决这两个问题。因此，他们决定彻底简化这些不可避免的问题，以大大减少开发前端所需的时间。这是Angular的第一个也是最重要的目标。而且它运行的非常好，您将永远不会比本地使用Angular更快地生产Web应用程序，尤其是当该应用程序既丰富又复杂时。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.