Redux-从嵌套在另一个数组中的数组中删除对象 [英] Redux - Removing object from array nested in another array
问题描述
我的Redux状态存储一个comments
对象,该对象存储一个注释数组.每个comment
对象中都有一个replies
数组.我同时将父注释ID和回复ID传递给我的reducer,目的是从回复数组中删除回复.
My Redux state stores a comments
object which stores an array of comments. Each comment
object has a replies
array in it. I am passing both the parent comment ID and the reply ID to my reducer with the intention to remove the reply from the replies array.
我的顶级注释对象的简化版本如下:
A simplified version of my top-level comments object looks like this:
{
"count": 4,
"data": [
{
id: 123,
text: 'This is a comment',
replies: [
{
id: 479,
text: 'This is a reply',
},
{
id: 293,
text: 'This is another reply',
},
],
},
{
id: 728,
text: 'This is another comment',
replies: [
{
id: 986,
text: 'This is a reply',
},
],
},
],
"pageSize": 5,
cursor: "",
}
这是我的简化程序,它似乎将父注释对象包装在一个数组中并平整了答复(显然不是期望的结果,但是我对解决嵌套数组的最佳方法不知所措).
And here is my reducer which appears to wrap the parent comment object in an array and flatten the replies (obviously not the desired result but I am at a loss as to the best way to tackle the nested array).
case types.DELETE_REPLY_SUCCESS: {
const content = Object.assign({}, state);
content.data = content.data.map((comment) => {
const newObj = { ...comment };
if (newObj.id === action.parentCommentId) {
return newObj.replies.filter(reply => reply.id !== action.replyId);
}
return newObj;
});
return content;
}
推荐答案
在redux中,更新嵌套结构可能非常麻烦.我建议使用更扁平的结构.您可以使用 normalizer 或手动执行此操作.
Updating a nested structure can be very nasty in redux. I suggest using a flatter structure. You can do this using normalizer or manually.
但是,如果您需要更新现有结构,请执行以下步骤:
However, if you need to update your existing structure, these are the steps:
- 找到您要更改的评论的索引.
- 创建一个新的过滤后的评论数组.
- 通过将旧注释替换为包含新回复数组的新注释来创建新数据数组.
- 使用新的数据数组创建新的状态对象.
示例
const state = {"count":4,"data":[{"id":123,"text":"This is a comment","replies":[{"id":479,"text":"This is a reply"},{"id":293,"text":"This is another reply"}]},{"id":728,"text":"This is another comment","replies":[{"id":986,"text":"This is a reply"}]}],"pageSize":5,"cursor":""};
const action = {
parentCommentId: 123,
replyId: 479
};
const deleteReplySuccess = () => {
const data = state.data;
// find the index of the comment you want to update
const commentToChangeIndex = data.findIndex(({ id }) => id === action.parentCommentId);
// if it doesn't exist return the state
if(commentToChangeIndex === -1) {
return state;
}
// get the comment
const comment = data[commentToChangeIndex];
// create an updated comment with filtered replies array
const updatedComment = {
... comment,
replies: comment.replies.filter(reply => reply.id !== action.replyId)
};
// create a new state using object spread or assign
return {
...state,
data: [ // create a new data array
...data.slice(0, commentToChangeIndex), // the comments before the updated comment
updatedComment, // the updated comment
...data.slice(commentToChangeIndex + 1) // the comments after the updated comment
]
};
};
console.log(deleteReplySuccess());
这篇关于Redux-从嵌套在另一个数组中的数组中删除对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!