调度动作Ngrx

如何解决调度动作Ngrx

我的用户可以将产品添加到列表中，并且我想为进入列表的每个产品生成一个ID（ID：1，ID：2，ID：3 ....）。这是我的代码：

减速器：

export const productReducer = createReducer(
initialSate,on(addProductToList,(state,action) => {
    console.log(state)
    return {
        ...state,productList: [...state.productList,action]
    }
}))

操作：

export const addProductToList = createAction(
"[Product] Add Product To List",props<{ product: Product; }>()
);

选择器：

export const selectFeature = (state: any) => state;

export const selectFeatureCount = createSelector(
selectFeature,(state: any) => state.products.idCounter
);

ONCLICK功能：

onSubmit(e) {
  e.preventDefault();

  if (this.addProductForm.valid)
  {
    this.store.pipe(select(selectFeatureCount)).subscribe(res => {
      this.addProductForm.value.id = res;
      this.addProductForm.value.isRecieved = false;
      this.store.dispatch(addProductToList(this.addProductForm.value));
      this.addProductForm.reset(this.addProductForm)
      this.router.navigate(['/products']);
    })
  }
}

解决方法

在您发表评论后，我想我理解您的问题背后的原因。

以下是我可以向您建议的解决方案：

简单

因此，如果您只想标识productList内的项目，则可以使用数组的索引，因此，如果您有一些简单的用例，例如使用{{1 }}后，您就可以在单个页面上呈现项目了

*ngFor

因此会发生的事情（如果您使用的是ngFor的默认行为，而没有使用<div *ngFor="let product of products; let i = index"> <div>{{product....}} </div> <button (click)="delete(i)">Delete</button> <button (click)="edit(i)">Edit</button> </div>选项）是，每当您修改产品列表时，元素就会重新呈现，并带有来自商店，您将能够一次又一次地编辑/修改新的（修改过的）产品列表。

在减速器内部，您将看到类似以下的内容

trackBy

稍微复杂一点

假设您有某种更复杂的视图，其中您在多个位置显示产品列表中的相同产品元素，并且数组idx与实际产品元素之间的动态关系可能会使您的代码混乱（它是动态的，因为无论何时您从数组中删除元素，索引比已删除元素高的元素将其索引减1，换句话说，将在数组内向左移动一个位置）

在这种情况下，我将建议为每个新产品创建某种唯一的ID，例如，它可能是基于时间的ID（您也可以使用Math.random或任何类似的方式），就像下面的代码片段一样。

export const productReducer = createReducer(
initialSate,on(addProductToList,(state,action) => {
    return {
        ...state,productList: [...state.productList,action]
    }
}),on(deleteProduct,{idx}) => {
    return {
        ...state,productList: [...state.productList.slice(0,idx),...state.productList.slice(idx+1)]
    }
}),{idx,modifiedProduct}) => {
    return {
        ...state,productList: [
        ...state.productList.slice(0,modifiedProduct,...state.productList.slice(idx+1)
        ]
    }
}),)

这样做，您将保证自己不会做任何有趣的事情，只要您是该产品列表的唯一消费者（更多有关以后可能出现的问题）。

在化简器内部，您可以使用相同的方法，但是从一开始，我们就需要自己找到它，而不是拥有元素的索引，这没什么大不了的。（您可以查看{ id: Date.now(),productName: 'Whatever the products is called',productPrice: 'Whatever the price is',... }）

结论

最佳实践取决于用例，如果您正在做某种小型的辅助项目，而第二种解决方案则是如果您要进行的工作将要在生产中使用并且被客户使用，请不要让任何偶然的事情发生，寻求第三个解决方案。

**旁注：如果您对更高级的@ngrx/effects使用感兴趣，请务必查看ngrx

如何解决调度动作Ngrx

解决方法

简单

稍微复杂一点

推荐的解决方案

结论

相关推荐