代码之家  ›  专栏  ›  技术社区  ›  DucksEatTurtles

如何在redux中存储特定状态的多个副本

  •  0
  • DucksEatTurtles  · 技术社区  · 5 年前

    应该注意的是,我正在使用Redux和React Native。

    为了简单起见,假设我有一个电子邮件查看器。这里有一个包含大量电子邮件的主页,当你点击一封电子邮件时,你会被导航到另一个屏幕。在这里,电子邮件的内容、标题、主题、正文都由redux管理。一切正常。

    假设我退出了那个页面,现在导航到另一封电子邮件。在显示新电子邮件之前,前一封电子邮件会弹出一秒钟。这里需要注意的是,我将数据作为一种“缓存”存储在异步存储中。这里的问题是,由于我只在每次点击电子邮件时才重新更新状态,因此作为电子邮件查看页面主体的状态会在用户导航到该页面后的一瞬间得到更新。这,真烦人。

    如何将我的数据体存储在另一个状态中,在功能上与当前电子邮件查看状态相同,而不覆盖当前活动状态?

    0 回复  |  直到 5 年前
        1
  •  0
  •   Sarah    5 年前

    您可以使用Redux的生命周期方法来处理这个问题。假设电子邮件详细信息组件的状态如下所示:

    export const initialState: StateShape = {
      loading: false,
      readOnlyEmailData: {
        recipientEmails: null,
        senderEmail: null,
        body: null,
      },
    };
    

    当电子邮件详细信息组件(我们称之为电子邮件详细信息.jsx)在加载时,可以使用ComponentDidMount()获取和设置值。

    您可能会有操作和操作创建者,比如getEmail、getEmailSuccess和getEmailError。在getEmail中将loading设置为true,然后在成功或出错时再次设置为false。当从emailner加载内容时,我可以很容易地从emailner加载内容。

    当用户单击一个新的电子邮件时,它将在mount上加载新的电子邮件数据并显示微调器,直到新的电子邮件数据可用。