如何删除 Redux Reducer 中的嵌套数组元素？

Question

几个小时以来我一直在为此苦苦思索。

我正在尝试删除对象中数组的嵌套元素。它必须在 reducer 中不可变地完成，这使得它变得棘手。

这是对象：

questions {
    0:
    answers: [{…}]
    createdAt: "2021-04-28T01:37:21.017Z"
    creator: "607f6ab0ee09c"
    likes: []
    name: "Firstname Lastname"
}

我只想删除 answers 数组的 1 个元素。问题是在我通过 'creator' 代码搜索之前我不知道（问题的）确切元素，然后我可以通过键 #.

删除答案元素

我尝试使用映射和过滤器，但由于深度为 3 层，该逻辑从未成功。我也愿意使用 Immutable-js。

非常感谢，对于看似简单的事情来说，这是一个令人费解的问题。

编辑：我意识到我可以确定 action creator 中顶级问题对象的键并将其发送到 reducer。所以我只需要知道如何做就是删除嵌套在另一个对象中的对象中的数组元素。

感谢您的帮助！

Answer 1

首先使用 ... ES6 运算符

克隆您的 questions 对象

const clonedQuestion = {...questions}

现在从答案数组中删除元素

const indexOfElementToRemove = clonedQuestion.answers.findIndex(element => element.creator === clonedQuestion.creator);
if(indexOfElementToRemove >= 0) {
  clonedQuestion.answers.splice(indexOfElementToRemove, 1)
}

Answer 2

您还可以查看官方的 redux 工具包，它允许您在他们的 createReducer- 或 createSlice- 创建的缩减器中使用这样的变异逻辑：

delete state.questions.answers[5]

请参阅本教程页面，它简要概述了我们认为的“现代 redux”：https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

如果这不是你现在想做的事情（但请记住，现代 redux 和旧版 redux 可以在一个应用程序中混合使用），请查看 immer 而不是 immutable因为 immutable 此时基本上已经死了，而 immer 有更好的开发者体验。

如何删除 Redux Reducer 中的嵌套数组元素？

How to remove a nested array element in Redux Reducer?

javascript

reactjs

redux

reducers