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))
  }
}

所以这样做的是，一旦路由发生变化，它就不会将新数据传递给组件，因此旧的数据/状态会保留在那里。您可以更多地抽象此函数，以使其可以轻松地重用于所有其他组件。

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

1 个答案: