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

Question

需要注意的是，我使用的是 Redux 和 React-Native。

为简单起见，假设我有一个 email 查看器。 有一个包含大量电子邮件列表的主页，当您点击 email 时，您将被导航到另一个屏幕。 在这里，email 的内容，标题，主题，正文，都保存在由 redux 管理的 state 中。 这一切都很好。

假设我退出该页面，现在导航到另一个 email。 在显示新的 email 之前，之前的 email 会弹出一瞬间。 这里应该注意的是，我将数据存储在 AsyncStorage 作为一种“缓存？”。 The issue here is that since I only re-update the state whenever I tap on an email, the state which is the body of the email viewing page gets updated a split second after the user is navigated to it. 这，很烦人。

问题的核心是这个

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

或者

这甚至是最好的方法吗？

谢谢

Answer 1

你可以使用 Redux 的生命周期方法来处理这个问题。 假设您的 email 详细组件的 state 看起来像这样：

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

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

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

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

当用户单击新的 email 时，它将加载新的 email 数据并显示微调器，直到新的 email 数据可用。

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