reactjs - RTKQ クエリを使用するコンポーネントのクリック イベントで updateCachedData を呼び出す正しい方法は何ですか?

Question

グローバルなどこかに updateCachedData への参照を保存し、そのクリックイベントで使用することしか考えられませんが、これが React の方法であるかどうかはわかりません。

Socket.IO サーバーで構築された通知フィードがあります。

通知をクリックすると、リストから削除されます。(リストには未読の通知のみが表示されます。)

しかし、リストから削除すると、通知ペインの状態として新しい配列が作成されます。

新しい通知を受け取ると、削除されたすべての通知が戻ってきます。これは意図したものではありません。

すべての通知のリクエストを再作成せずに、キャッシュ エントリを変更し、より正確に項目を削除するにはどうすればよいですか?

エラー メッセージはありません。

コード

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);
  }
})