使用React-Redux处理浏览器历史记录

Question

我们在您的应用程序中使用React-Redux。问题是，我们希望基于浏览器按钮的用户导航来撤消和重做Redux状态。例如，假设用户在页面A中，用户浏览了几个其他页面，然后导航到页面A。现在，如果用户在浏览器中按下后退按钮，他将返回到页面A，但在这里，我们想要的是当用户访问页面A时，应用程序所具有的状态的前一个实例。

有没有一种集中的方法来解决这个问题，而不需要手动处理状态操作。

Answer 1

您试图实现的是React-Redux的默认行为。如果您没有尝试分派一些操作，当路由更改时，它应该保持其旧状态，而不需要任何额外的功能。

所以我的猜测是，当新的路由加载组件时，您会分派一些操作。如何处理这个问题(例如，一旦存在就不从rest API获取资源，这最终导致操纵组件)是这样的：https://github.com/reactjs/redux/blob/master/examples/async/src/actions/index.js#L35

const shouldFetchPosts = (state, reddit) => {
  const posts = state.postsByReddit[reddit]
  if (!posts) {
    return true
  }
  if (posts.isFetching) {
    return false
  }
  return posts.didInvalidate
}

export const fetchPostsIfNeeded = reddit => (dispatch, getState) => {
  if (shouldFetchPosts(getState(), reddit)) {
    return dispatch(fetchPosts(reddit))
  }
}

因此，它所做的是，一旦路由更改，如果组件已经存在，它就不会将新数据传递到组件中，因此旧数据/状态会留在那里。您可以对此函数进行更多抽象，以使其易于在所有其他组件中重用。