如何在 redux [reactjs] 中为每个选项卡设置一个商店？

Question

我们有一个由多个页面组成的网络应用程序，其中包含从数据库中检索到的数据链接。单击一个链接[数据]后，用户应该被引导到另一个页面。对于页面之间的导航，我们使用了面包屑。面包屑存储在 redux 存储中。目前，当用户尝试在新选项卡中按 ctrl+单击或打开链接时，我们设法跨多个选项卡使用单个商店。因此，如果用户在新选项卡中打开 3 个单独的链接 [数据]，则在刷新这些选项卡/页面时，对面包屑进行的更新会影响先前打开的选项卡。例如：

在主页，我有这些链接：

数据_1 数据_2 数据_3

首页当前的面包屑是这样的： 主页/

一旦用户在新选项卡中打开 Data_1，新选项卡中的预期面包屑为： 主页/Data_1/

同样，如果用户尝试打开 Data_2 和 Data_3，在新选项卡中，选项卡 1 和选项卡 2 的面包屑应分别如下所示：

主页/Data_2/

主页/Data_3/

在当前的实现中，每当打开新链接时，我设法更新面包屑的状态，以便面包屑[0] 相当于主页，而面包屑[1] 最初是 Data_1，然后变成 Data_2，最后是 Data_3。因此，面包屑[1] 的最后一个值是 Data_3，因为这是最后打开的链接。我的问题是，每当用户刷新之前打开的与 Data_1 和 Data_2 对应的选项卡/页面时，由于它们都使用单个存储并且面包屑 [1] 已更改为 Data_3，因此 Data_1 和 Data_2 页面中的面包屑也变为 Data_3。

在这种情况下，我可以考虑使用多个商店，因为我认为考虑到我的用例，这可能是唯一的解决方案。同时，我在网上找不到任何关于在 redux 中使用多个商店的足够文档。也许我可以在参数中将商店传递到下一页......？类似的东西

有人可以帮忙吗？提前致谢。

Answer 1

为了模拟每个标签的相同站点持久性，我会在页面即将刷新之前（window.beforeunload 或类似）

1 - 写信给 localStorage 关于我的面包屑

2 - 刷新

3 - 从 localStorage 中读取我的面包屑以正确初始化自己（所以这里的数据应该是我的，因为我刚刚写了它）

4 - 从 localStorage 中删除面包屑信息（以防止其他选项卡读取它）

现在，您仍然会遇到用户只是关闭选项卡的情况，因此您的 localStorage 中会有关于面包屑的陈旧数据。您可以添加一点过期机制（您可能会认为 localStorage 中超过 10 秒的数据是陈旧的，并假装它不在这里并在第 3 步将其删除。）Cookie 的工作原理几乎相同，带有内置 -在过期机制中。