Question

在我的应用程序中，从redux状态更新一行平面列表后，它未按预期呈现。

我的代码是

   // like Button Handler
    case SM_ACTION_LIKE:
      let updatedPosts = state.posts;

      updatedPosts.forEach(post => {
        if (post.shareId === action.payload.postId) {
          post.likeCount = action.payload.likeCount
        }
      });

      return {
        ...state,
        posts: updatedPosts
      };
      break;

在尝试找到此问题的解决方案后，我使用了以下代码，它按预期工作。

// like Button Handler
case SM_ACTION_LIKE:
  let updatedPosts = state.posts;

  updatedPosts.forEach(post => {
    if (post.shareId === action.payload.postId) {
      post.likeCount = action.payload.likeCount
    }
  });

  return {
    ...state,
    posts: updatedPosts.slice()
  };
  break;

在updatedPosts末尾使用slice（）是解决方案。这是一个很好的做法，还是一个更好的方法来解决这个问题？

Answer 1

这有效的原因是updatedPosts.slice()返回一个帖子的副本，这是redux期望状态更新需要不可变的。

不使用任何不可变库的常用方法是使用spread运算符

  return {
    ...state,
    posts: [...updatedPosts]
  };

其他方法是使用Immutablejs，immer等不可变库

在react-native中更新redux状态后重新渲染屏幕

1 个答案: