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

Question

应该注意的是，我将 Redux 与 React-Native 一起使用。为简单起见，假设我有一个电子邮件查看器。有一个包含大量电子邮件列表的主页，当您点击电子邮件时，您会被导航到另一个屏幕。在这里，电子邮件的内容、标题、主题、正文，都保存在一个由 redux 管理的状态中。这一切都很好。假设我退出该页面，现在导航到另一封电子邮件。在显示新电子邮件之前，前一封电子邮件会弹出一秒钟。这里应该注意的是，我将数据存储在 AsyncStorage 作为一种“缓存？”。这里的问题是，由于我只在点击电子邮件时重新更新状态，所以作为电子邮件查看页面正文的状态在用户导航到它后瞬间更新。这，很烦人。问题的核心是这个如何在不覆盖当前活动状态的情况下将我的数据主体存储在另一个状态，在功能上与当前电子邮件查看状态相同？或者这甚至是最好的方法吗？

Answer 1

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

export const initialState: StateShape = {

  loading: false,

  readOnlyEmailData: {

    recipientEmails: null,

    senderEmail: null,

    body: null,

  },

};

当电子邮件详细信息组件（我们称之为 EmailDetail.jsx）正在加载时，您可以使用 ComponentDidMount() 来获取和设置您的值。

您可能会拥有像 getEmail、getEmailSuccess 和 getEmailError 这样的操作和操作创建器。在 getEmail 中将 loading 设置为 true，然后在成功或错误时再次设置为 false。您可以将条件渲染的微调器组件（很容易从 MaterialUI 之类的东西借用）添加到 EmailDetail，该组件仅在加载为 true 时可见，并在加载为 false 时渲染其余内容。

当用户点击后退按钮或以其他方式离开组件时，可以为 componentWillUnmount() 提供一个在组件准备卸载时要做的事情的列表。在这种情况下，您可以使用重置方法将加载和 readOnlyEmailData 重置为卸载时的初始状态。

当用户单击新电子邮件时，它将在挂载时加载新电子邮件数据并显示微调器，直到新电子邮件数据可用。

还有其他方法可以做到这一点，这不是最优化的，但它应该比你迄今为止尝试过的更好。我希望它有帮助:)