如何根据字符串的 ID 删除带有 Angular NgRx 的项目？

Question

我想实现一个"removeCustomerById(id:string)"功能。我是 NgRx 的新手，不确定如何实现它。这是我的方法：

操作数

// Delete Customer ========================
export const deleteSingleCustomerAction = createAction(
 ActionTypes.DeleteCustomerAction,
 props<{ customerID: string }>()
);
export const deleteSingleCustomerActionSuccess = createAction(
  ActionTypes.DeleteCustomerSuccessAction,
);

减速器

// Delete Customer ========================
on(deleteSingleCustomerAction, (state, {customerID}) => ({
 ...state,
 loading:   true,
 customers: state.customers.filter(element => element.id !== customerID)
})),

CustomerTable 组件：删除函数

onDeleteClick(element: CustomerElement): void {
 this.store.dispatch(deleteSingleCustomerAction({customerID:element.id}));
}

我这里有一个正确的 UI 行为。单击“删除”按钮删除所选元素。

问题是我的后端没有改变，如果我刷新我的应用程序，所有删除的项目又回来了。我的服务中已有发送删除请求的功能。

客户服务

removeCustomberById(id: string) {
 // REST API CALL delete item by id
}

问题是如何以及何时调用removeCustomberById(id: string)

必须作为 NgRx Effect 来完成吗？因为它是副作用？或者我需要在派送前致电removeCustomberById(id: string)吗？

喜欢这个原型：

 onDeleteClick(element: CustomerElement): void {
  //REST delete
  deletedCustomer =  this.customerService -> REST delete Request element
  //dispatch
  this.store.dispatch(deleteSingleCustomerAction({customerID: 
  deletedCustomer.id}));
}

在我的方法中，我决定实现一个效果：

deleteCustomersActionEffect = createEffect(
 () => this.actions$.pipe(
  ofType(ActionTypes.DeleteCustomerAction),
  mergeMap((customerID: string) => //<-this is wrong
  this.customerService.removeCustomberById(customerID)
    .pipe(
      map((customers: CustomerDTO[]) => (
        {
          type:    ActionTypes.DeleteCustomerSuccessAction,
          payload: customers
        }
      )),
    )),
  tap(() => console.log(ActionTypes.DeleteCustomerAction + " - Action 
 Dispatched"))
 ),
);

但这不起作用，因为 mergeMap((customerID: string) 的 customerID 是一个 [OBJECT] 而不是 string 和 id。我真的不明白如何建立这样的效果。

如何在我的效果中获取正确的字符串 ID？

Answer 1

你快到了！你确实想要在这里产生副作用，我建议你的减速器对 DeleteCustomerSuccessAction 做出反应（这样你就可以确保你的 API 在前端删除客户之前已经删除了它）而不是DeleteCustomerAction（在我看来，应该只让 Effect 对其做出反应）。

解决办法就在你那个臭名昭著的mergeMap。想一想你在那里收到的到底是什么。你在这里传输什么？管道中的前一步为您提供了什么？

...

一个动作！您会收到完整的 Action 而不仅仅是其有效负载。

希望这能让您走上正确的轨道...

如何根据字符串的 ID 删除带有 Angular NgRx 的项目？

How to remove an item with Angular NgRx based on the ID of a string?

angular

ngrx

ngrx-effects