有没有办法先在选项卡之间同步 redux 存储状态，然后让每个选项卡控制自己的状态？

Posted 2023-03-08

【中文标题】有没有办法先在选项卡之间同步 redux 存储状态，然后让每个选项卡控制自己的状态？

【英文标题】：Is there a way to first sync redux store state between tabs and then let each tab control its own state?

【发布时间】：2020-05-25 02:53:15

【问题描述】：

我是使用 redux 的新手，找不到任何有助于解决我的困境的东西。

我有一个带有 redux 商店的 react 应用程序。我在应用顶部有过滤选项（一些日期选择器等）和一些标签（链接元素），其中包含不同的内容作为页面的主要部分。

我希望能够在新窗口中打开标签（通过单击在新窗口中打开标签）并将状态（包括过滤）同步到新窗口。

现在我正在使用 redux-state-sync 实现这一点，但这只能解决初始负载。从那时起，我希望每个新标签都能管理自己的状态，并在新窗口中打开其中一个标签时传递该状态。

有什么明显的方法可以解决吗？

我尝试使用 localStorage、sessionStorage，但这让我回到了我无法访问每个选项卡的状态，只有最后更新的状态。

任何帮助将不胜感激！

【参考方案1】：

只需在新窗口的 uri 中添加一些 post 选项，例如 localhost:3000/?sync=true 然后在 App.js 的 componentDidMount 函数中解析这个参数，然后将同步状态（例如来自 indexDB）分派给 redux。你的减速器应该是这样的：

案例“同步状态”： 返回（动作.值） 打破

【讨论】：

感谢您的回答，但我不明白这将如何解决？你的意思是我应该通过uri中的所有状态？我想避免这种情况，因为 uri 可能超过长度限制。

不，给 uri 你应该只传递一个选项，它表示需要状态同步，状态应该保存在 indexDB 中（mb 在 cookie 中）。流程将是这样的：1）第一个选项卡将状态保存到 indexdb 2）它使用 uri 选项打开新选项卡，这需要状态同步 3）第二个选项卡将状态与 indexdb 中的数据同步

感谢您的澄清。但是，如果多个选项卡同时打开并且用户在它们之间切换怎么办？说从不同的标签在新标签中打开。最后存储的状态不一定是此特定选项卡的最后状态。除非真的有必要，否则我不想使用 indexDB。

你可以将一些uid绑定到每个标签，并通过这个iud从db中获取状态（我认为这是必要的），而不是uri看起来像这样/?sync=$uidOfParentTab