Replace/Change 使用 immer 的 Redux 状态数组和其他数组

Question

我正在使用 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 并将其存储在状态中？

Answer 1

在普通的 reducer 中，你会 return 从旧数组中创建一个新数组，这就是你在这里所做的。但是 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);
})

编辑：我相信 return 新值也可以。你只是不能将它分配给 draft.

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

Replace/Change 使用 immer 的 Redux 状态数组和其他数组

Replace/Change Redux state array with other array using immer

reactjs

redux

react-redux

immer.js