我们如何在多个选项卡（页面）中使用相同的状态？

Question

我的应用程序中有一个页面，它是一个带有一系列设置（过滤器、时间范围等）的交互式图表。我想将它们存储在应用程序状态，因为某些设置可能会被另一个页面上的其他组件使用，但是现在如果我单击任何其他选项卡并返回到上一个选项卡，那么页面会显示初始状态（图表不见了，过滤数据不见了，日期范围显示默认值，下拉菜单也显示默认值）。而且状态也显示null。

Answer 1

组件状态中的任何东西都是动态的；即，它是暂时的。如果刷新窗口，旧状态将丢失。当您打开一个新选项卡时，也会发生类似的事情——您将获得在构造函数中声明的状态。如果您想在另一个选项卡中显示状态数据，您可以使用以下任何一种：

1. 仅仅使用 redux 并不能解决您的问题，因为 redux 商店也与特定的浏览器选项卡有关。如果你想在浏览器刷新时保持你的 redux 状态，最好使用 redux 中间件来做到这一点。查看redux-persist、redux-storage 中间件。

2. 如果您使用react-router，您只需在打开新标签页时通过链接传递所需的状态。这是一个例子：

<Link to={{ 
  pathname: '/pathname', 
  state: { message: 'hello, im a passed message!' } 
}}/>

1. 只需将数据存储在localStorage 并在其他选项卡中访问localStorage。

Answer 2

如果您希望在整个应用程序中使用变量，您也可以使用 localStorage

localStorage.setItem('move', this.state.move);

完成后不要忘记取消设置！

localStorage.removeItem('move');

Answer 3

对此的直接解决方案是redux-state-sync。它会正常工作，并且商店将在浏览器上的所有选项卡甚至窗口上更新。

Answer 4

我认为你应该在你的应用中实现 react-redux。 React-redux 是一个状态管理工具，它可以在一个集中的位置管理应用程序的状态，并且您可以随时随地访问存储中的数据。 反应减少： https://redux.js.org/basics/usage-with-react

Answer 5

你是一些用于状态管理的库。与 React 一起使用的最流行的是 redux。

https://redux.js.org/introduction