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:

1. 找到您要更改的评论的索引.
2. 创建一个新的过滤后的评论数组.
3. 通过将旧注释替换为包含新回复数组的新注释来创建新数据数组.
4. 使用新的数据数组创建新的状态对象.

示例

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屋！