时间戳

首页 > 解决方案 > 如何为有评论的帖子构建 React 上下文

javascript - 如何为有评论的帖子构建 React 上下文

问题描述

介绍

在实施 Instagram 克隆时：

  1. 用户有帖子。
  2. 帖子可以被点赞。
  3. 用户可以在帖子中发表评论。
  4. 帖子有一个 totalLikes 和 totalComments 字段。
  5. 评论可以点赞。
  6. 用户可以回复评论。
  7. 评论有一个totalLikes 和totalComments（回复）字段。

到目前为止，我一直在使用当前的 PostsContext：

const initialState = {};

export function PostsProvider({ children }) {
   const [contents, dispatch] = useReducer(contentsReducer, initialState);

   const addUserPosts = (userId, posts, unshift = false, cached = true) => { ... }

   const likePost = (postOwnerId, postId) => { ... }

   const commentPost = (postOwnerId, postId, comment) => { ... }

   const getUserPosts = (userId) => { ... }

   const getUserPost = (userId, postId) => { ... } 
}

在哪里，我的状态数据如下所示：

{
   userId1: { 
      posts: [ 
         {
            id,
            uri,
            totalLikes,
            totalComments,
            isLiked,
            date
         },
         ...
      ]
   },
   userId2: { posts: [...] }
 }

问题

我的问题是，我应该使用其他上下文来发表评论吗？我的意思是，评论的工作方式与帖子相同，它们可以被点赞和回复……所以也许，这是不必要的。

当用户在帖子中评论时：

1. The post totalComments is increased.
2. If the user is replying to a comment in the post, the replied comment's totalComments is increased too.

当用户点赞评论时，它不会影响帖子“数据”本身，只会影响点赞的评论 totalLikes 字段。

所以......如果我为评论创建一个新的上下文，我似乎需要在其中使用 PostsContext ，以增加 post totalComments 字段。

关于如何构建我的帖子上下文的任何想法？

注意：我的问题更多是关于上下文组织的（不要看实现，只看我的有状态数据的结构和拆分上下文的想法）。

标签： javascriptreactjsreact-nativereact-reduxreact-hooks

解决方案

有取舍。对于多个上下文，您可以选择在单个上下文中呈现组件，从而在另一个上下文更改时减少刷新（提高性能）。

但是，如果您的大多数组件都需要访问多个上下文，那么拥有一个“存储”（单个应用程序级上下文）可能会更好。如果您正在使用选择器模式（不仅适用于 Redux），那么选择器可以计算否则会在多个上下文中的数据。

我正在从事一个具有多种背景的项目，并经常考虑将它们结合起来。

如果您的项目很复杂，您可能需要考虑Redux而不是上下文。它增加了复杂性，但解决了一些围绕组织和结合国家不同领域的问题。如果你这样做，我强烈建议从Redux Toolkit开始以减少样板。

推荐阅读