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

Question

简介

正在实施 Instagram 克隆：

1. 用户有帖子。
2. 帖子可以被点赞。
3. 用户可以在帖子中发表评论。
4. 帖子有一个 totalLikes 和 totalComments 字段。
5. 评论可以点赞。
6. 用户可以回复 cmets。
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: [...] }
 }

问题

我的问题是，我应该为 cmets 使用另一个上下文吗？我的意思是，cmets 的工作方式与帖子相同，它们可以被点赞和回复……所以也许没有必要。

当用户在帖子中出现时：

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 字段。

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

关于如何构建我的帖子上下文有什么想法吗？

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

Answer 1

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

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

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

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