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

What is the purpose of having a didInvalidate property in the data structure of a react-redux app's state?

本文关键字：属性 didInvalidate 是什么 应用 react-redux 程序状态 数据结构      更新时间：2023-09-26

我正在从中间件上的 react-redux 文档中学习，但很难理解 reddit 示例中 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))
    }
  }
}

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

了解一些生命周期将有助于进一步解释。Redux 使用mapStateToProps来帮助决定是否在全局状态更改时重绘组件。

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

您是正确的，继续进行远程调用效率低下，但shouldFetchPosts可以防止这种情况。一旦所需的数据被获取(!posts为假(或正在获取(isFetching为真(，则检查shouldFetchPosts返回假。

一旦有一组posts处于该状态，那么应用程序将永远不会从服务器获取另一组。

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

状态的更改会触发组件重绘，如前所述，该重绘会检查shouldFetchPosts哪个属于执行return posts.didInvalidate子句，现在为 true，因此触发操作以REQUEST_POSTS并获取当前服务器端数据。

所以重申一下：didInvalidate建议需要获取当前的服务器端数据。

投票

最多的答案并不完全正确。

didInvalidate用于告诉应用数据是否过时。如果true，则应从服务器重新获取数据。如果false ，我们将使用已有的数据。

在官方示例中，触发INVALIDATE_SUBREDDIT将didInvalidate设置为 true。此 Redux 操作可以作为用户操作(单击刷新按钮(或其他操作(倒计时、服务器推送等(的结果进行调度。

但是，仅触发INVALIDATE_SUBREDDIT不会向服务器发起新请求。它仅用于确定我们是否应该重新获取数据或在调用时使用现有数据 fetchPostsIfNeeded() .

因为 didInvalidate设置为 true ，该应用程序不会让我们多次获取数据。要刷新我们的数据(例如，在单击刷新按钮后(，我们需要： 

dispatch(invalidateSubreddit(selectedSubreddit))
dispatch(fetchPostsIfNeeded(selectedSubreddit))

因为我们调用了invalidateSubreddit()，所以didInvalidate设置为true，fetchPostsIfNeeded()将启动重新获取。

(这就是为什么 danmux 的答案并不完全正确。当状态(映射到 props(更改时，不会调用生命周期方法componentDidMount; 仅当组件首次挂载时，才会调用 componentDidMount。因此，在重新挂载组件之前，点击刷新按钮的效果不会出现，例如从路由更改开始。

相关文章：