反应路由器和通量 - 过渡时清除状态

Posted 2023-02-22

【中文标题】反应路由器和通量 - 过渡时清除状态

【英文标题】：react-router and flux - clearing state while transition

【发布时间】：2015-08-15 12:05:55

【问题描述】：

我正在使用带有通量架构的 react-router（facebook 的通量实现）。

目前在我的系统中，我有一条显示“聊天/：主题”的路线。

当用户进入这个组件时，我正在创建一个到 websocket 服务器的订阅（使用 action 创建，在 componentWillMount 上），并且我正在移除 componentWillUnmount 上的订阅。

当用户移动到另一个路由时，整个工作流程都可以正常工作 - 因为 react-router 正在卸载我的组件。

当我在我的路线内转换（从“聊天/游戏”到“聊天/电视”）时，组件没有安装，我需要清除组件的状态。

我读到了我可以采取的不同操作，以及在转换时调度一个操作“TRANSITION”，每个相关的商店都会清除它的商店。

在我看来，这种行为 - 是错误的，它将我的商店和我的路由器耦合在一起。

你会如何解决这个问题？这是我应该向 react-router 提出并要求他们在我的路由中卸载的问题吗？

【参考方案1】：

感谢 gaearon (https://github.com/gaearon/)，我找到了答案，

使用存储来保留所选主题并向消息存储请求消息，在不断变化的情况下，您不应该从存储中删除任何内容，除非出于性能原因需要它。

在我的应用程序中，我必须删除消息（因为它们是大对象）并清除我的订阅（以减少服务器上的负载）。

为了实现这一点，我找到了三个解决方案：

使用 componentWillReceiveProps 并检查参数是否已更改，是否更改了参数 - 执行任何您需要清除存储的操作 - 例如调用 ActionCreator 并重置状态。 在转换中发送一个 dispose 有效负载（在 Router.run 内），它会告诉所有的商店清除自己。 最后一个解决方案（我使用过）确保我的组件已卸载 - 为什么？清除 componentWillReceiveProps/dispose 上的状态太容易出错，而确保组件已卸载更清楚。

关于如何实现这一点的详细信息：

https://github.com/rackt/react-router/issues/292

https://github.com/rackt/react-router/issues/496#issuecomment-64152941

【参考方案2】：

据我所知，您还需要同时使用 componentWillReceiveProps 和 componentDid/WillMount 来捕捉初始渲染。

我正在焦急地等待 react-router 1.0 的发布（这个周末？），希望有更优雅的方式来做到这一点。

【讨论】：

这就是我最终所做的，但我认为这在 componentWillReceiveProps 中非常困难 - 因为你需要确保你清除了你的状态，而重新挂载（卸载/挂载）将更安全和更清洁的方式做这个。我希望 react-router 能解决这个问题。

添加 1.0 更改的链接 - github.com/rackt/react-router/pull/1158，看起来不像解决这个问题 :(

【参考方案3】：

我相信 compomentWillReceiveProps 可能会解决您的问题。这就是 react 路由器用来向你传递东西的东西。