将 redux 状态与 url 路径同步

Question

我有一个切换开关作为我的组件之一，我想将它与我的网址同步。让我们考虑当我的切换关闭时我有 3 条路线（/abc、/lmn、/xyz）。当用户打开切换开关时，我会得到类似（/abc-t、/lmn-t、/xyz-t）的路线。

我的切换开关状态是 redux。

现在假设，当我的开关处于关闭状态并且我在 /abc 路由上并且我打开我的切换开关时，它会在 redux 中触发一个动作，然后我从 /abc 切换到 /abc-t 路由并且当我点击后退按钮 我确实导航到 /abc 路线，但开关仍处于 ON 状态。

另外，如果用户输入一个网址，我想根据条件切换开关。

有没有办法将该开关/切换状态与 url 路由同步？或任何方式来存储所有以前的状态？

Answer 1

您需要考虑一下您的“唯一真实来源”是什么。

一种方法是仅在 URL 中保持切换开关状态，而不是在 redux 中。拨动开关时，您将使用 history.push 更新 URL。 history 将包含所有以前的状态和 slug。

在这两个地方存储它实际上更复杂。您需要在应用程序的最高级别使用 useEffect 挂钩来触发 URL 和商店中的更改，以确保它们彼此保持同步。您将有一个useSelector，它获取当前的 redux 开关状态，并且该值将是 useEffect 的依赖项之一。当 redux 状态发生变化时，查看它是否与 URL 匹配。如果不是，请使用 history.push 更新 URL 以使其匹配。第二个useEffect 挂钩将由 URL 中的更改触发，如果它们不同步，则会将更改发送到 redux 存储。请小心，因为如果您不是有条件地进行更改（仅在存在不匹配时）或您的更改未创建匹配项，则使用此设置很容易创建无限循环。