javascript - 在 react-redux 应用程序状态的数据结构中有一个 didInvalidate 属性的目的是什么？

Question

我正在从关于中间件的 react-redux 文档中学习，但无法理解 reddit example 中的 didInvalidate 属性的用途。 .看起来这个例子通过中间件让商店现在进行 API 调用的过程从 INVALIDATE_SUBREDDIT 然后到 REQUEST_POSTS 然后到 RECEIVE_POSTS。为什么需要 INVALIDATE_SUBREDDIT？查看下面的操作，我只能猜测它可以防止在用户非常快速地单击“刷新”时发生多次提取。这是此属性的唯一目的吗？

function shouldFetchPosts(state, subreddit) {
  const posts = state.postsBySubreddit[subreddit]
  if (!posts) {
    return true
  } else if (posts.isFetching) {
    return false
  } else {
    return posts.didInvalidate
  }
}

export function fetchPostsIfNeeded(subreddit) {
  return (dispatch, getState) => {
    if (shouldFetchPosts(getState(), subreddit)) {
      return dispatch(fetchPosts(subreddit))
    }
  }
}

Answer 1

您很接近 didInvalidate 与减少服务器请求有关，但它与阻止获取有点相反。它通知应用它应该去获取新数据；当前数据确实“无效”。

稍微了解一下生命周期将有助于进一步解释。 Redux 使用 mapStateToProps 来帮助决定当全局状态改变时是否重绘一个 Component。

当一个 Component 即将被重绘时，例如因为状态(映射到 props)发生变化，componentDidMount 被调用。通常，如果状态依赖于远程数据，componentDidMount 检查状态是否包含远程数据的当前表示(例如通过 shouldFetchPosts)。

你是正确的，继续进行远程调用是低效的，但是 shouldFetchPosts 可以防止这种情况发生。一旦获取了所需的数据(!posts 为 false)或正在获取数据(isFetching 为 true)，则检查 shouldFetchPosts 返回 false。

一旦状态中有一组posts，应用将永远不会从服务器获取另一组。

但是当服务器端数据改变时会发生什么？该应用程序通常会提供一个刷新按钮，该按钮(因为组件不应更改状态)会发出一个“操作”(例如 INVALIDATE_SUBREDDIT)，该操作被简化为设置一个标志(posts.didInvalidate ) 处于指示数据现在无效的状态。

状态的变化触发了组件重绘，如前所述，它检查 shouldFetchPosts ，它属于执行 return posts.didInvalidate 的子句，现在为真，因此触发REQUEST_POSTS 和获取当前服务器端数据的操作。

因此重申:didInvalidate 建议需要获取当前服务器端数据。