Redux：如何管理跨路由的冲突状态？

Posted 2023-04-14

【中文标题】Redux：如何管理跨路由的冲突状态？

【英文标题】：Redux: How to manage conflicting state across routes?

【发布时间】：2019-11-14 18:47:58

【问题描述】：

在我的应用程序中，在 route1 上，我从 api 调用中获取项目列表。组件已连接，项目保存在redux store 并作为道具传递给组件。现在，在 route2 上，我再次需要此项目列表。 现在，当我们移动到 route2 时，我正在再次获取项目列表

重用已经处于全局状态的项目列表是否有意义？如果是，我们如何决定何时过期以及何时重新获取？

如果重复使用项目列表没有意义，我是否应该在离开 route1/加载 route2 时清除列表？因为否则，我在 route2 中的组件不能以列表在加载时为空的假设开始，我必须额外检查列表是否为空。这将使我的组件有点了解全局状态结构。

以不同的方式命名这些状态是否有意义，这样一个就不会干扰另一个？这似乎不对，因为两个功能是相同的，我们不希望为此增加全局状态的大小。

redux 或任何全局状态管理库不是处理这种状态的好选择吗？这似乎是一条路由的本地状态，不应干扰另一条路由上的本地状态，因此它不是真正的全局状态。我们应该只在 redux 中保留全局状态吗？

我之前一直在使用 useReducer 和 axios 调用来执行此操作。这种情况下的状态是每个组件/路由的本地状态，因此他们不必关心该状态是否已被其他人填充。这种方法在路由之间共享状态存在问题，但是本地状态问题得到了很好的处理。

【问题讨论】：

两个路由是否获取相同的项目列表？

是的，在这种情况下，它们确实会获取相同的项目列表。

【参考方案1】：

在这种情况下，我认为您应该将全局状态下的项目列表存储为只读数据。当路由组件初始化时，它应该从全局状态中克隆这个项目列表并将其存储为本地状态。

这种方式确保项目列表数据在多个组件之间共享，而不必为每个路由重新获取它，而每个组件可以选择对其本地数据做任何他们想做的事情，而不会影响其他组件。此外，当组件卸载时，它会清理其本地状态，因此您不必担心由于项目列表的多个副本而导致内存泄漏。

【讨论】：

那么，在这种情况下，应该什么时候决定刷新全局状态呢？我知道对此可能没有“正确”的答案，但是哪些因素可以帮助确定状态何时过时

@gaurav5430 好吧，这取决于您与 API 服务器通信的方式。你能描述一下你打算如何检测来自 API 的数据变化吗？ （通过轮询、推送通知等）

现在，没有检测到数据变化，每次你去一个新的路线，我都取最新的数据

【参考方案2】：

我一直处于这种情况，我使用的方法如下：

为两条路由保持一种状态。因为这是唯一的一点 在整个应用程序中保持单一的事实来源。如果我们想为两条路线保留一个单独的列表，那么我们可以直接使用我认为这里不需要的状态。 列表的获取应该在componentDidMount 中完成 在第一条路线和路线 2 中，您可以再次获取列表并根据一些校验和比较数据，如果我们有新数据，如果我们有新数据更新原始列表。在这方面，我们没有 过时数据的问题。

也许您可以有不同的用例，但请检查这种方法是否有效。

【讨论】：

如果我们必须再次获取 route2 中的数据，让这些路由独立于全局状态并始终在本地获取状态不是很有意义吗？为什么我们甚至需要在 redux 中保持状态？

我们仅在需要时获取数据。

@gaurav5430 有什么帮助吗？？

您如何决定何时需要数据？另外，这种方法比较麻烦，要检查是否有新数据，然后在原始列表中更新。此外，列表的获取可以在 route1 的 componentDidMount 中完成，没有先加载哪个路由的顺序，因此所有检查都需要在两个路由中进行