Reactjs 在NextJS中实现本地相似/不相似功能并使其在客户端路由之间持久化

我有一个使用构建的博客前端应用程序，它看起来像这样：

这里的每张卡都是一个名为

postReview.jsx

的功能组件。如您所见，每个组件都带有一个心形图标。默认情况下，此图标将保持灰色。然而，当点击时，它会变成红色，表示该帖子受到了欢迎。此操作仅在用户登录时发生。如果没有，单击心脏图标将显示登录模式

现在，我只关注如何在客户端导航之间保持“like”，即不与db/服务器进行任何交互

现在，单击图标，可以切换颜色。然而，当你离开的时候，比如说，点击一个帖子标题，然后点击后退按钮返回到这个页面，它就无法持久存在。实现此功能的推荐方法是什么

整个代码库可在我的回购协议中找到：

有关组件（

postReview.jsx

）的代码位于：

该站点位于

我知道我可以使用Redux，但不知道如何防止每次重新渲染时重置值，即使在使用Redux时也是如此

更好地说明问题

访问博客页面；组件的多个实例（

postReview

）首次呈现：

通过

likedBy

prop对象接收post“likers”数组

通过

userInfo.userID

从Redux存储中检索登录的用户ID

根据ID的

likedBy.readers

数组查找

userInfo.userID

如果用户ID存在于

读卡器

数组中，post是喜欢的，则将

喜欢的

设置为

错误

以将心形图标变为红色，并将post的

ID

推到

喜欢的post

redux存储区

如果

读卡器

数组中不存在用户ID，请将

喜欢的

保留为

继承

以将其保留为灰色，并从

喜欢的帖子

redux存储中删除帖子的

ID

像一个职位；单击心脏图标：

将

liked

设置为

error

可将心脏图标变为红色

将帖子的

id

推到

likedPosts

redux存储区

不像一个职位；单击心脏图标：

将

liked

设置为

inherit

可将心脏图标变为红色

从

likedPosts

redux存储中删除帖子的

id

现在，单击页面上的任何链接以离开页面（客户端路由，此处无服务器联系人）。然后点击浏览器的

back

按钮返回博客页面

此时，组件（

postReview

）将重新呈现，并且redux存储将根据原始

likedBy

prop对象重置。当然，这意味着自第一次渲染以来的所有更改都将消失。这就是我需要帮助的地方。您将如何处理这样一种情况，即像喜欢和不喜欢这样的用户交互必须在客户端导航中持久化，并在重新呈现中得到尊重？

我看到两种方法：

1） 简单：通过使用本地存储，您可以编写类似的数组

likes: [likedPostId1, likedPostId2, ...]

然后在PostReview中检查当前卡id是否包含在数组中

let isLiked = likes.includes(currentPostId);

2） 右图：通过使用Redux，方法相同，但您将在Redux中存储likes数组并用于页面导航。

---

了解SPA中导航的工作原理对于简单的SPA实施至关重要：

简单的解决方案是只使用带有挂钩的上下文API（刷新将重置它） 1a。另一个简单的解决方案是使用带有挂钩的LocalStorage（刷新或后退按钮将持久化它）

然后你可以把它重构成REDUX（很多样板） 2a。因此，也许您可以将GraphQL用作应用程序状态

下面是一篇文章，解释如何使用上下文API突出显示Redux与挂钩：

另外值得注意的是，REDUX或GraphQL不会在刷新之间保持它本身

4. If user ID exists in readers array, post is liked, set liked to error to turn the heart icon red and push post's id to the likedPosts redux store.

5. If user ID doesn't exist in readers array, leave liked to inherit to leave it gray and remove post's id from the likedPosts redux store.

你应该把它包起来。和#5。作为redux商店中的一个操作

    const mapDispatchToProps = (dispatch) => {
      return {
        onUpdateLikedPosts: (data) => dispatch(actions.updateLikedPostsAction(data))
      };
    };

并且，在安装PostReview组件时执行该函数

    const componentDidMount() {
        this.props.onUpdateLikedPosts(data)
    }

---

我看到的唯一问题是，每次组件重新渲染时，LocalStorage/Redux数据都会被重置。因此，组件第一次渲染时，它会接收likes数组（喜欢帖子的人的数组）作为道具。然后我将这个数组添加到LocalStorage或Redux存储中，以供将来参考。当我喜欢/不喜欢帖子时，存储的数组会更新。现在我导航到另一页。然后当我点击“后退”返回到上一个。页面中，PostReview组件重新呈现，初始赋值再次发生。这将撤消我上次在那里时可能进行的任何更新。@学习者，如果我希望在页面重新加载或页面刷新时保持持久性，我通常使用redux persist（）。我的问题不在于页面刷新，因为在这种情况下，服务器调用将确保在浏览器中显示正确的数据。这里，我指的是没有中间服务器请求的客户端路由。