Angular ngrx无状态组件+与存储交互

是否可以编写与ngrxs存储交互的无状态组件

我看到的几乎所有示例都没有使用@Input为组件提供状态，而是使用组件内的this上下文通过选择器检索状态，根据定义，选择器使组件具有状态

---

我不相信ngrx中有任何等效的MapStateTops，它允许与商店进行无状态交互。

我将给您举个例子

假设您在应用程序中有一个方面负责显示要销售的产品

products.component.ts有状态组件

product$ = this.store.select(getProducts);
selectedProduct: IProduct;
constructor(private store: Store<ProductsState>) { }

setSelectedProduct(product: IProduct) {
  this.selectedProduct = product;
}

选择-product.component.html

<product-details *ngFor="let product of products$ | async"
   [product]="product"
   (productSelected)="setSelectedProduct($event)"
></product-details>
<div class="selected-product" *ngIf="selectedProduct">
  <selected-product
    [product]="selectedProduct"
  ></selected-product>
</div>

<div (click)="onProductSelect()">
  <div>{{ product.id }}</div>
  <div>{{ product.name }}</div>
</div>

<img src="product.img" alt="product image" />
<div class="rating">{{product.rating}}</div>
<div *ngFor="let comment of product.reviewComments"> {{ comment }}</div>

因此，我们的想法是制作一个与您的应用程序相关的功能片，其中一个组件是有状态组件，它知道如何与存储区（即products.component.ts）通信。其他每个视图都会获得输入到其中的数据

这并不能解决道具钻取的问题，但它将使单元测试具有@Input和@Output无状态组件的组件变得容易

我在React中也使用了这种方法，其中我有一个带有mapDispatchToProps和mapStateToProps的有状态组件，然后我将属性作为道具向下传递，使单元测试更容易

我不会考虑MaStastOpToPS中的子组件，因为它们仍然必须知道如何从存储区和编写单元测试中读取，因为这将是很困难的，因为在进行单元测试时，您必须模拟商店或给商店。 这种钻取的另一个优点是，一个组件负责从存储中读取数据，如果存储的结构发生变化，则必须在一个组件中进行代码更改，并且属性将像以前一样向下流动。但是，使用每个子组件都具有MapStateTops的方法，存储结构的更改将在每个具有MapStateTops的位置完成

---

如果希望在多个位置使用this.store.select，也可以，但这相当于在多个位置使用MapStateTops。基本上，如果您可以按照概述的方式进行道具钻取，那么单元测试和重构就会更容易。

我认为如果您使用的是存储中的状态，那么您的组件就不能是无状态的。所以当你说-允许与商店进行无状态交互-这是一个矛盾。这也取决于交互的含义是什么？i、 e.只分派操作，不消耗存储中的状态？通常以一种有角度的方式执行此操作的方法是使用一个包装器组件与存储对话并获取数据，然后使用@Input properties将数据下推到子组件。@AliF50但这并不能解决属性钻取的问题。。。那么，重做有什么意义呢？

@Input() product: IProduct;

<img src="product.img" alt="product image" />
<div class="rating">{{product.rating}}</div>
<div *ngFor="let comment of product.reviewComments"> {{ comment }}</div>