在使用 RTKQ 查询的组件中的单击事件上调用 updateCachedData 的正确方法是什么？

Question

我只能考虑在全局某处存储对 updateCachedData 的引用并在该单击事件中使用它，但我不确定这是 React 的做法。

我有一个使用 Socket.IO 服务器构建的通知提要。

点击通知即可将其从列表中删除。（该列表应仅显示未读通知。）

但是从列表中删除时，我在通知窗格中创建了一个新数组作为状态。

当我收到新通知时，所有已删除的通知 return 返回 - 这不是我想要的。

如何更改缓存条目，更准确地从中删除项目而不重新发出所有通知的请求？

没有错误消息。

代码

getNotifications: build.query<
  IDbNotification[],
  IGetNotificationsQueryParams
>({
  query: (params: IGetNotificationsQueryParams) => ({
    url: `notifications?authToken=${params.authToken || ""}&limit=${
      params.limit
    }&userId=${params.userId || ""}${
      params.justUnread ? "&justUnread" : ""
    }`,
    method: "GET"
  }),
  keepUnusedDataFor: 0,
  async onCacheEntryAdded(
    arg,
    { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
  ) {
    const { myIo, connectHandler } = getWebSocketConnection(
      "notifications",
      clone({
        subscribtions: arg.userId
          ? getFollowedUserIds().concat({
              uid: arg.userId,
              justUnread: arg.justUnread
            })
          : getFollowedUserIds()
      })
    );

    const listener = (eventData: IDbNotification) => {
      if (
        (eventData as any).subscriber === arg.userId &&
        (!arg.justUnread || typeof eventData.readDateTime === "undefined")
      ) {
        updateCachedData(draft => {
          draft.unshift(eventData);
          if (draft.length > arg.limit) {
            draft.pop();
          }
        });
      }
    };

    try {
      await cacheDataLoaded;

      myIo.on("notifications", listener);
    } catch {}

    await cacheEntryRemoved;

    myIo.off("notifications", listener);
    myIo.off("connect", connectHandler);
  }
})

Answer 1

您可以使用updateQueryData - updateCachedData只是为了方便当前缓存条目的快捷方式。

        dispatch(
          api.util.updateQueryData('getNotifications', arg, (draft) => { 
           // change it here 
          })
        )

查看更多上下文：https://redux-toolkit.js.org/rtk-query/usage/optimistic-updates

在使用 RTKQ 查询的组件中的单击事件上调用 updateCachedData 的正确方法是什么？

What is the correct way to call updateCachedData on a click event in a component that uses the RTKQ query?

caching

reactjs

react-redux

redux-toolkit

rtk-query

代码