在 Redux 中更新深度嵌套的状态

Question

我正在更新我所做的“留言板”项目（Brad Traversy 的 MERN 堆栈课程），以包含点赞评论。举个简单的例子，想想 Facebook：你创建一个人们可以喜欢的帖子，人们可以用 cmets 回复，这也可以被喜欢。

我有一个“帖子”状态，其中包含帖子喜欢（post.likes 数组）、cmets（post.cmets 数组）和评论喜欢（事情变得棘手：嵌套在 post.cmets 数组中的数组)。

如何更新 reducer 中的嵌套数组，以便我的页面正确重新呈现？现在，它会记录操作并在手动重新加载页面时显示新的喜欢/不喜欢，但它不会重新加载页面本身。

我尝试过更新状态，但事实是，我不完全确定如何循环并更新深度嵌套的内容。

这是我的实际帖子状态，由 Redux DevTools 提供。

post: {
    posts: [],
    post: {
      _id: '5cebd8bcdc17fd5cd7e57a45',
      text: 'This is my brand new post.',
      name: 'Bobby Smith',
      avatar: '//www.gravatar.com/avatar/414868368393e3ba8ae5ff93eeb98de6?s=200&r=pg&d=mm',
      user: '5cd646c9a632b51373121995',
      likes: [
        {
          _id: '5cebd8d1dc17fd5cd7e57a47',
          user: '5cd36ce5fda120050ee64160'
        }
      ],
      comments: [
        {
          date: '2019-05-27T12:32:16.172Z',
          likes: [ /*-------- This ---------*/
            {
              _id: '5cebd8e1dc17fd5cd7e57a48',
              user: '5cd646c9a632b51373121995'
            }
          ],
          _id: '5cebd8d0dc17fd5cd7e57a46',
          text: 'And this is my brand new response.',
          name: 'John Doe',
          avatar: '//www.gravatar.com/avatar/b2b146dba9e0023cb56637f0df4aa005?s=200&r=pg&d=mm',
          user: '5cd36ce5fda120050ee64160'
        }
      ],
      date: '2019-05-27T12:31:56.598Z',
      __v: 3
    },
    loading: false,
    error: {}
  }
}

减速机：

const initialState = {
  posts: [],
  post: null,
  loading: true,
  error: {}
}

export default function(state = initialState, action) {
  const { type, payload } = action
  switch (type) {
    case UPDATE_COMMENT_LIKES:
      return {
        ...state,
        post: { ...state.post, comments: ???? }
      }
    default:
      return state
  }
}

它传入post ID和user ID，然后根据它们是否已经存在进行过滤。为了清楚起见，我还将添加动作创建者。

// Add like to comment
export const addCommentLike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/comment/like/${id}`)

    dispatch({
      type: UPDATE_COMMENT_LIKES,
      payload: { id, likes: res.data }
    })
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    })
  }
}

// Remove like from comment
export const removeCommentLike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/comment/unlike/${id}`)

    dispatch({
      type: UPDATE_COMMENT_LIKES,
      payload: { id, likes: res.data }
    })
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
      loading: false
    })
  }
}

现在，它正在更新数据库中的所有内容，但不会立即更新状态并触发重新渲染。

如果能得到任何帮助，我将不胜感激。

谢谢！

Answer 1

我知道这有点太晚了，但它可能对某人有所帮助。顺便说一句，我也上了这门课；） 所以在你的情况下减速器看起来像这样：

case UPDATE_COMMENT_LIKES:
  return {
    ...state,
    post: {
      ...state.post,
      comments: state.post.comments.map((comment) =>
        comment._id === payload.id
          ? { ...comment, likes: payload.likes }
          : comment
      )
    },
    loading: false
  };

Answer 2

如果你也能在你的 reducer 中拆分删除/添加逻辑会更好：

• ADD_COMMENT_LIKES - 将喜欢添加到嵌套的喜欢数组中
• REMOVE_COMMENT_LIKES - 将根据 id 过滤选择的like

export default function(state = initialState, action) {

    const { type, payload } = action;

    switch (type) {
        case ADD_COMMENT_LIKES:
            return {
                ...state,
                post: {
                    ...state.post,
                    comments: [
                        ...state.post.comments,
                        likes: [
                            ...state.post.comments.likes,
                            payload <--- inserting the new like
                        ]
                    ]
                }
            }
        case REMOVE_COMMENT_LIKES:
            return {
                ...state,
                post: {
                    ...state.post,
                    comments: [
                        ...state.post.comments,
                        likes: [
                            ...state.post.comments.likes.filter((item) => item.id !== payload.id)
                        ]
                    ]
                }
        default:
            return state
    }
}

阅读如何combine reducers，并将您的状态形成为一个独立的分支。它将帮助您以更易于维护的结构构建您的减速器。