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

【问题标题】：Handling browser history with React-Redux使用 React-Redux 处理浏览器历史记录
【发布时间】：2016-10-19 06:12:16
【问题描述】：

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

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

【问题讨论】：

标签： browser-history react-redux

【解决方案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))
  }
}

因此，这样做的目的是，一旦路由更改（如果已存在），它就不会将新数据传递给组件，因此旧数据/状态将保留在那里。您可以进一步抽象此功能，使其可轻松地用于所有其他组件。

【讨论】：