反应中的浏览器后退按钮反转状态

Question

为了获得一致的用户体验，我希望当用户点击浏览器后退按钮时，我的反应应用会反转其状态。

例如，如果我使用函数调用更改状态中的元素：

  changeVar = (idx) => (event) => {
    this.setState({thisIndex: idx});
    //how to notify browser stack of this change?
  }

如何将此添加到浏览器堆栈中，以便用户可以单击浏览器中的后退按钮来反转状态更改？

Answer 1

所以一般来说问题是“如何处理浏览器Back / Next按钮？”或“我如何对用户导航历史做出反应？”

此处出现History API及其.pushState这样的事情。

简而言之：

1. 在每个重要状态更改后，您调用history.pushState(stateData)
2. 一旦用户单击“返回”按钮，它实际上不会导航到不同的URL而只是更改当前状态（但仅当使用.pushState或.replaceState创建堆栈中的先前状态时）
3. 您的代码会通过收听popstate event
来检测是否发生了历史记录导航（单击了“后退”按钮）
4. 基于您从history.state读取的适当状态数据，您可以正确恢复应用程序状态

到目前为止，最后一个问题是如何将应用程序中的所有数据放在单个对象中，并在以后使用模块状态恢复所有应用程序。在这里，redux得到了帮助。 Redux假设您在所有应用程序上只有一个Store。换句话说，所有状态都已包含在单个对象中，您只需将其传递到.pushState()进行存储，并在单击“返回”按钮后将其恢复。

PS记得我告诉过重大的更改吗？因为“整个应用程序中的所有数据”足够大，所以会在存储器中存储数百万次存储的开销。如果单击“返回”按钮说只是折叠下拉列表，那将是一个愚蠢的行为。

PPS，由于history是全局的，因此无法按组件方式存储/恢复状态。所以也许（只是可能）最好为您的组件实现类似“状态更改历史记录”的内容，并建议用户使用一些不同的控件来恢复其状态（而不是单击浏览器中的“返回”按钮）