如何在ImmutableJS中存储和更新深层嵌套的结构

Question

我正在用react + redux建立一个小博客，但我想不出该如何回复博客文章下的评论。 我正在为一篇看起来像这样的博客帖子获取评论结构。

"[
{"_id":"5676ed8b9104691f3b85b687",
"content":"Lorem",
"creator":"Admin",
"replies":[
  {
    "_id":"5676ede4b7a9044c3c1d9641",
    "content":"Ipsum",
    "creator":"Admin",
    "replies":[
      {
        "_id":"5676eec224ab8fe23c7ce4c6",
        "content":"Dolor",
        "creator":"Admin",
        "replies":[]
      },
      {
        "_id":"5676eeda1c0e3d093d1f90a0",
        "content":"Sit",
        "creator":"Admin",
        "replies":[]
      }
    ]
  },
  {
    "_id":"5676ee5b4b03bbac3c1f7544",
    "content":"Amet",
    "creator":"Admin",
    "replies":[]
  },
  {
    "_id":"5676ee91c43c05c63c319ace",
    "content":"Sup",
    "creator":"Admin",
    "replies":[]
  }
]},
{...}
]

如何将其存储在ImmutableJS状态下，以便可以基于_id轻松添加评论的回复？ 另外，注释必须是可迭代的，因为之后我会将它们渲染到注释树中，但是只要使用ImmutableJS数据结构，我认为这不会成为问题。 基本上我不知道如何在我的减速器中实现此功能。

[REPLY_COMMENT]: (state, { payload }) => {
  const { _id, comment } = payload
  let newState = ???
  return newState
}

编辑

这是jsbin，显示我要实现的目标。 我只希望能够回复所有评论

Answer 1

你得把这个分解一下。

因此，首先让我们将注释添加到Immutable.Map

state = state.update('coolPostId', post => Immutable.fromJS(comments));

const replyToPostComment = {
  _id: '1234',
  content: 'Hello',
  creator: 'RandomUser',
  replies: []
};

现在，在coolPostId下有一个Immutable.List ，因此您想通过push新注释来update该列表：

state = state.update('coolPostId', comment => comment.push(Immutable.fromJS(replyToPostComment)));

这将通过您的第一个测试：

const expected = state.get('coolPostId').last();
expect(expected.toJS()).to.deep.equal(replyToPostComment);

第二部分同样简单，但是您需要映射注释，并检查_id与您的元数据匹配。

这是您的设置：

const replyComment = {
  _id: '5678',
  content: 'Wellcome',
  creator: 'RandomUser2',
  replies: []
};

const reply = {
  postId: 'coolPostId',
  commentId: '1234',
  comment: replyComment
};

下一行取决于将执行_id检查的函数，

state = state.get(reply.postId)
  .map(comment => addReply(comment)(reply));

最后一个难题是addReply谓词：

const addReply = c => cr => c.get('_id') === cr.commentId ? c
  .update('replies', replies => replies.push(Immutable.fromJS(cr.comment)) ) : c;

这是完整的jsbin可供审查