Redux 工具包查询 - 使旧数据失效

Question

我有一个 MediaCard 组件，该组件包含一个 img 元素和一个带标记的 url 元素。必须首先需要此令牌才能获取图像。这里需要注意的是令牌将在 30 秒后过期。它会是这样的：

const MediaCard = () => {

    // This should refetch the token everytime a new component is 
    // mounted and 30 seconds has passed since the last fetch

    const { data: token, error: tokenError, isLoading: tokenIsLoading } = useGetTokenQuery(undefined, { refetchOnMountOrArgChange: 30 });

    if (tokenError) return 'Error'

    if (tokenIsLoading) return 'Loading skeleton'

    return (
       <img url={`/url/${token}/image1.jpg`}
    )

当我只有一个 MediaCard 组件时，一切正常。当我安装第一张媒体卡、加载令牌然后渲染图像时，问题就开始了。然后，如果我让 30 秒过去，当我尝试装载新的 MediaCard 时，挂钩将开始重新获取令牌，但保留旧数据。这带来了两个不同的问题：

挂载新组件时，由于我们有一个过期的令牌作为数据，因此图像将无法加载。然后，在收到新的令牌后，图像将重新渲染然后工作。
收到新令牌后，所有先前安装的图像都将重新呈现。我希望在使用有效令牌渲染图像后保持这种状态并且不再渲染。

也许解决方案不是关于 RTK 查询而是 React 本身。

Answer 1

RTK 查询“查询”的要点是“反映”服务器的状态——这意味着我们假设对具有相同参数的某个端点的请求将始终具有最“最新”的date" 响应（将它们视为 REST 资源）- 并将使所有这些查询响应在组件边界上彼此同步。

在您的情况下，您似乎不希望这样，您希望这些对组件而言是本地的。老实说，您不需要像 Redux 这样的全局状态 - 您可以发出请求并将响应保存到本地组件状态。

如果你仍然想为它使用 RTK 查询，你应该在这里进行突变而不是查询 - 因为每个组件的突变结果都是唯一的。并在组件安装后直接在 useEffect 中触发突变触发器。

Redux 工具包查询 - 使旧数据失效

Redux Toolkit Query - Invalidating old data

reactjs

redux

redux-toolkit

rtk-query