Redux商店已更新，但UI不是

Question

我对评论的投票得分有问题。我可以在Redux Devtool中看到值已经改变但我需要强制重新加载以更新UI。

不确定为什么会这样。我将我的注释作为一个对象，将父元素id的键作为键和内部的数组。

然后在mapStateToProps中进行转换。

图片显示了不同评论阶段的图片。

任何人都知道为什么会这样。

干杯，彼得

动作

export function pushVoteComment(option, postId) {
  const request = API.commentPostVote(option, postId)

  return dispatch => {
    request.then(({ data }) => {
      dispatch({ type: COMMENTS_POST_VOTE, payload: data, meta: postId })
    })
  }
}

减速

const comments = (state = {}, action) => {
  switch (action.type) {
    case COMMENTS_GET_COMMENTS:
      return {
        ...state,
        [action.meta]: action.payload,
      }
    case COMMENTS_POST_VOTE:
      console.log('An vote request was sent returning ', action.payload)
      return { ...state, [action.payload.id]: action.payload }
    default:
      return state
  }
}

PostDetailes（此处用于渲染PostComment）

renderComments() {
    const { comments, post } = this.props
    console.log('This post has these comments: ', comments)
    return _.map(comments, comment => {
      return (
        <div key={comment.id} className="post-container">
          {post ? (
            <PostComment
              key={comment.id}
              postId={comment.id}
              body={comment.body}
              author={comment.author}
              voteScore={comment.voteScore}
              timestamp={comment.timestamp}
            />
          ) : (
            ''
          )}
        </div>
      )
    })
  }

const mapStateToProps = (state, ownProps) => {
  const { posts, comments } = state
  return {
    comments: comments[ownProps.match.params.postId],
    post: posts.filter(
      item => item.id === ownProps.match.params.postId && item.deleted !== true
    )[0],
  }
}

PostComment

  <i
    className="fa fa-chevron-up"
    aria-hidden="true"
    onClick={() => pushVoteComment('upVote', postId)}
  />
  <span className="vote-amount">{voteScore}</span>
  <i
    className="fa fa-chevron-down"
    onClick={() => pushVoteComment('downVote', postId)}
  />

export default connect(null, { pushVoteComment })(PostComment)

PS：

使用{parentId：[{comment1}，{comment2}]}

构建它的原因

我是否在显示所有帖子时使用它来查看大量评论。

return ({comments.length})

const mapStateToProps = (state, ownProps) => {
  return {
    comments: state.comments[ownProps.postId]
      ? state.comments[ownProps.postId]
      : [],
  }
}

Redux开发工具

第一次按下“按钮”时看起来像这样：

然后，当我再次按下时，我得到了这个：

Answer 1

这里的问题是它正在改变状态，而不是考虑我将我的评论存储为

的事实

{
  [postId]: [array of comments]
}

所以为了解决这个问题，我最终改写了我的减速机。

case COMMENTS_POST_VOTE:
  const { parentId } = action.payload // get commentId
  const commentList = [...state[parentId]] // get array of comments, but copy it
  const commentIndex = commentList.findIndex(el => (el.id === payload.id)) // get index of comment
  commentList[commentIndex] = action.payload // update the commentList
  const updatedPost = {...state, [parentId]: commentList} // return new state
  return updatedPost