在新标签页/窗口中访问Redux状态

时间:2018-10-28 00:43:44

标签: reactjs redux react-router state

我正在使用redux来存储我的状态。当我导航到同一页面(多个组件但在单个页面上)时,它可以正常工作。但是,当我在新标签页/窗口中的链接中打开时,状态变得不确定。

根据调查结果,刷新页面或在新标签页/窗口中打开时,预期redux状态会重置。然后我想到的是,导航到另一个组件时将store.getState()作为参数传递,这样,如果该组件看到状态未定义,它将访问其props状态(由上一个组件传递)。

现在,当在新标签页中打开链接时,我需要传递状态。我正在使用react-router进行导航。当前,仅当我单击链接时,状态就会传递到其他页面。但是,当我在新窗口/选项卡中打开链接时,状态再次变为未定义。我正在使用它导航到指定的链接:

<Link to={link}>{value}</Link>

其中link是一个包含我需要传递的路径名和状态(store.getState())的const。

我发现了许多类似的stackoverflow问题[例如programmatically-navigate-using-react-router]。我尝试使用

<a onClick={history.push(link)}>

但是它似乎不起作用。也许我使用错误的方式。其他我只是无法弄清楚在这种情况下如何使用/实现。

除了说明以外,请提供示例代码段。我是redux / react的初学者。

谢谢!

1 个答案:

答案 0 :(得分:0)

您应该检查的第一件事是您使用的是正确版本的React-Router。我不确定该方法是否可以在V4之外的其他技术上使用。

如果您确实在使用React-Router V4,但仍然无法使用。您可以采用的另一种更清洁的方法是将应用程序的状态保存到本地存储中,不仅在重定向到新的选项卡/窗口之后,而且在刷新之后也可以保存状态。

This video by Dan Abramov explains how to do it.