javascript - 用于获取、喜欢和不喜欢帖子的 Redux reducer

Question

我已经使用 Redux 和 React Native 实现了类似的功能。

我有一个初始状态为 posts = [] 的 reducer，我的 reducer 看起来像

const initialState = {
  posts: []
};

function postReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
      return {
        ...state,
        posts: action.posts
      };

    case LIKE_POST:
      return {
        ...state,
        posts: state.posts.map(post => {
          if (post._id === action.postId) {
            return {
              ...post,
              likes: !!post.likes ? post.likes.concat(action.userId) : [action.userId]
            }
          }
          return post;
        })
      };

    case UNLIKE_POST:
      return {
        ...state,
        posts: state.posts.map(post => {
          if (post._id === action.postId) {
            return {
              ...post,
              likes: post.likes.filter(userId => userId !== action.userId)
            }
          }
          return post;
        })
      };

    default:
      return state
  }
};

我知道我不能在我的状态下改变 posts 数组，所以我必须返回一个新的帖子数组，其中我修改了用户试图喜欢/不喜欢的帖子。

它看起来工作得很好，但速度太慢了。我只有很少的帖子，但我仍然需要等待将近一秒钟才能看到它。

这是正确的方法吗？我是否将我的帖子正确存储为状态中的简单数组？我不确定替代方案是什么，但例如，我在这个 GitHub repo 中看到过它可以做不同的，虽然我不完全理解它的结构。

Answer 1

你是对的，这是缓慢而乏味的，但如果你想确保你不改变状态并坚持建议的正确模式，这是必要的。

也就是说你有几个选择，一个明显的是让 helper functions解决您面临的常见问题，但是(个人)更好的解决方案是使用 ImmutableJS 。它将为您提供三样东西:

首先，它保证您不会改变状态，因为所有更改都会返回一个新的和不同的副本。

第二个是一个方便的 API，它允许您轻松地进行更改，而不是使用笨拙的语法来解决普通的 javascript。

第三个好处比较小，但您可以访问不可变类型，例如 List , Map , 多种 Collections并使用 Records 定义您自己的类型，我建议将其用于每个 reducer 状态，因为您可以声明状态的形状，并且只改变定义的属性，而不是添加新属性。

与 Immutable reducer 的一部分看起来像这样:

case FETCH_POSTS:
  return state.set('posts', action.posts);
case LIKE_POST:
  let posts = state.posts.map( (p) => {
      if (p.id === action.postId) {
         return p.set('likes', 'something');
      }
      return p;
  }

如果您根据 Record 构建您的状态，它会变得更加令人兴奋，所以你会:

export default Record({
   posts: List(),
}, 'SocialRecord');

这会让你拥有 state.get('posts')或 state.posts还有immutable功能为 Record我们有getters .

查看文档了解更多信息:

Immutable Documentation