Redux:将部分状态作为卸载组件删除？

Question

我目前正在编写一个带有react,redux和react-router的应用程序.

应用程序的许多路径(或子路由)填充了redux存储的状态,最终将自己的reducers组合在一起.

但通常情况下,由路由组件管理的状态部分特定于此组件,并且在卸载组件后"可以删除".

我担心当用户浏览不同的屏幕时,他会用未使用的数据填充状态并使整个应用程序膨胀.所以我正在考虑一种方法来放弃未使用的部分状态.

让我们来看看多个不同实体的CRUD应用程序(问题,帖子,图像,......).当我列出问题时,可能没有必要在州内拥有帖子,反之亦然.我应该在转换到问题列表时删除帖子列表吗？

这是一种不好的做法吗？有一个很好的方法来做到这一点？你觉得怎么样？

Answer 1

除非你正在处理成千上万的记录,否则它可能不值得付出努力并且会使你的代码复杂化.您确定这对您的应用来说是一个真正的问题吗？保持旧状态实际上很方便,例如即时"后退"按钮.

如果你对它有强烈的感觉,你可以在卸载某些组件或路由更改时发送清理操作.但是我认为在绝大多数应用程序中这都是不必要的,只要你记得在安装后检查任何新项目,保持缓存可能更好.

Answer 2

如果您的数据已加载到详细信息组件（不是master）中，那么我认为可以恢复状态。

由于详细状态组件实际上不会被“缓存”，因此，即使您切换回显示相同的资源，数据也将再次下载。而且，如果您要显示其他资源，则上次访问的资源的剩余状态将保持到下载当前资源的数据为止，并将其连接到用户。

一种方法是定义一个动作/减少器，以在要卸载详细信息组件时恢复状态。

另一种方法是在路由更改时恢复状态：

import { LOCATION_CHANGE } from 'react-router-redux'
import * as types from 'constants/ActionTypes'

const initialState = {}

export default function show(state = initialState, action) {

  switch (action.type) {

    case types.LOGOUT:
    case LOCATION_CHANGE:
      return initialState

    case types.SHOW_SUCCESS:
      return action.payload

    default:
      return state
  }
}

Answer 3

@Dan Abramov 不仅没有必要，而且还会导致难以跟踪错误。我们已经经历过，因为 componentWillUnmount() 是异步的，所以当你从这个视图直接转到另一个依赖于该部分 reducer 的视图时，当分派一个 action 来清除 componentWillUnmount() 内部的某个 reducer 时，可能会导致错误。

例如：

假设您有以下商店状态形状：

const state = {
    list: ["thing"]
}

然后想象我在一个叫做 Things 的视图中使用这个状态

然后想象一下，我意识到在我的其他视图中的 10 个中有 9 个我没有使用 state.list，所以我决定要防止“膨胀”或“内存泄漏”，然后我采取了一个行动来清除我状态的这一部分在组件中将卸载在事物中

您会期望事件的顺序始终是：

1. 卸载东西
2. 调度操作以清除 state.list
3. 然后挂载下一个视图
4. 然后在 10 个视图中的 1 个中重新填充 state.list 如果您在此视图中需要它

然而，这不是顺序。有时它会是：

1. 卸载事物并直接转到另一个需要 state.list 的视图
2. 立即安装下一个视图。我们的视图确实需要 state.list 所以我们调度这个动作。或者，由于 state.list 已经存在，我们不分派 fetch 操作，因为我们已经有了它。
3. 片刻之后，componentWillUnmount 成功调度了 CLEAR 操作
4. 即使您不想，您也无意中清除了此视图中的 state.list。当然，因为我们是@connected，所以我们的屏幕变黑了！

也就是说，即使 Redux 是同步的 componentWillUnmount 不是同步的，因此不能保证在其中分派的任何操作都按您想要的顺序发生。在任何边缘情况下，这都是一个问题，在这种情况下，您实际上直接转到了另一个需要该状态部分的视图。

解决此问题的一种方法是在 componentWillUnmount 内部设置一个条件，该条件表示“仅当我出于以下原因离开此视图（卸载它）时才调度 CLEAR 操作......此部分状态。例如，您可以通过在 localState 中有一个名为 shouldIClearList: 之类的属性来执行此操作，并且默认情况下它为 true，除非我单击名为 goToMyOtherViewThatNeedsList 的按钮。但是，这在许多情况下增加了不必要的复杂性需要列表的其他视图的链接位于完全不同的顶级父组件（如导航栏）中的情况，因此，您尝试转到的视图是否是这个“有问题的视图”并不容易“知道”通过您的孩子事物组件。

我实际上认为“膨胀”的想法是一个有效的想法，并且在卸载时清除 redux 而不会遇到这样的问题的最佳方法将不胜感激。我能立即看到的唯一解决方案是永远不要清除 componentWillUnmount 内部的减速器。这太危险了。或者，如果您确实必须这样做，请确保您的应用程序中绝对没有办法从这个视图直接转到另一个需要该状态部分的视图（在一个巨大的应用程序中，这是一件非常困难的事情，而不必拥有某种公司所有软件团队共享的文档）。