ngrx存储减速器配置(角度5)

首先,不需要几个减速器。如果您觉得当前的减速机太大/有多个职责/由于某些限制应拆分,则应实施新的减速机。

回到你的问题——假设你的客户有“id”属性。在我想展示的场景中,应用程序将显示当前ID的列表——来自customerList。customerList将使用ngrx操作进行动态更新(模板将监听更改)。

在组件中:

public customerIds$: Observable<string[]>;

public ngOnInit(): void {
   this customerIds$ = this.store.select(
      state => state.customersList.map(customer => customer.id);
   );
}

在模板中:

<div *ngFor="let id of customerIds$ | async">
   {{id}}
</div>

现在(使用异步管道)将html模板与ts组件连接起来。所以,假设您有一个按钮,可以将新客户添加到CustomerList:

<button (click)="addNewCustomer()">Add new customer</button>

还有 addNewCustomer() 方法是分派一个由您的商店处理的操作。动作的结果是隐藏在减速器中,类似于:

... (reducer logic)
   case ADD_NEW_CUSTOMER:
      return {
        ...state,
        customersList: [...state.customersLits, action.payload]

哪里:

• 行动有效负载-是您想要添加的新客户

• […state.customersList……”语法-需要使用不可变的方法更新数组-更多信息可在此处找到: https://vincent.billey.me/pure-javascript-immutable-array/

单击按钮后,模板中将显示新的客户id