使用沉浸器用其他阵列替换/更改Redux状态阵列

问题描述

我正在使用immer管理我的redux状态。它具有一个由顾客组成的商品。我的网站上有一个删除按钮，在删除按钮上，我想从处于我的状态的客户列表中的数组中删除该项目。 在此示例中，我要删除ID 100

Redux状态

customers : [{Id: "100",Name: "John"},{Id: "200",Name: "Mark"}],address: null,randomStuff [{}]

代码

customerIdTobedeleted = 100

const newCustomers = produce(customers,(draft) => {
      const newCustomers = draft.filter((x) => x.Id !== customerIdTobedeleted );
      draft = newCustomers ;
    }); 

这不起作用。它说不能重新分配参数草案。如何从阵列中删除一个ID并将其存储在状态中？

解决方法

在普通的reducer中，您将从旧数组中返回一个新数组，这就是您在这里所做的。但是Immer是基于突变的。除了重新分配外，您要做的是更改数组变量draft的内容。为此，我们调用了push()，pop()之类的变异方法，在本例中为splice()。

update patterns上的Immer文档中有一个示例，此处适用。

// delete by id
const deletedTodosArray = produce(todosArray,draft => {
    const index = draft.findIndex(todo => todo.id === "id1")
    if (index !== -1) draft.splice(index,1)
})

您的情况是：

const customerIdToBeDeleted = "100"; // since your customer ids are strings

const newCustomers = produce(customers,(draft) => {
  const index = draft.findIndex(x => x.Id === customerIdToBeDeleted);
  if (index !== -1) draft.splice(index,1);
})

编辑： 我相信返回新值也是可以的。您只是无法将其分配给draft。

const newCustomers = produce(customers,(draft) => {
  return draft.filter(x => x.Id !== customerIdToBeDeleted );
});