Redux Toolkit 查询 - 使旧数据无效

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 时，钩子将开始重新获取令牌，但保留旧数据。这带来了两个不同的问题：

1. 当新组件挂载时，由于我们有一个过期的令牌作为数据，图像将无法加载。然后，在接收到新令牌后，图像将重新渲染并开始工作。
2. 一旦收到新的令牌，所有以前安装的图像都会重新渲染。我希望在使用有效令牌渲染图像后保持这种方式并且不再渲染。

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

Answer 1

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

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

如果您仍然想使用 RTK 查询，您可能应该在此处使用突变而不是查询 - 因为每个组件的突变结果都是唯一的。并且在组件挂载后直接在useEffect 中触发突变触发器。