當發送特殊事件（套接字 IO 訊息）時，如何使所有 Redux RTK 查詢無效？

Question

我想為所有使用者（多個選項卡，多個使用者）同步 SPA React 應用程式。我編寫了一個簡單的反應鉤子，它監聽特定的套接字 IO 訊息並根據名為 useGetAllEmployeesQuery 的訊息更新狀態變數：

import { useEffect, useState } from 'react'

export function useRefetchOnMessage (messageType) {
  const [needRefetch, setNeedRefetch] = useState()

  if (!window.io.socket) {
    return
  }

  function handleMessage (e) {
    setNeedRefetch(Date.now())
  }

  useEffect(() => {
    window.io.socket.on(messageType, handleMessage)

    return () => {
      window.io.socket.off(messageType, handleMessage)
    }
  }, [])

  return needRefetch
}

當調度此事件時，我只需呼叫 RTK refetch() 方法。

const employees = useGetAllEmployeesQuery(officeId)

const needRefreshEmployees = useRefetchOnMessage('employees changed')

useEffect(() => {
  if (!needRefreshEmployees) return

  employees.refetch()
}, [needRefreshEmployees])

因此我們需要在應用程式中的任何地方呼叫它，假設我們有 5 個使用員工查詢的元件，我們需要在所有元件中呼叫 refetch 。許多查詢只要運行一次就足夠了，就可以運行。 （一次無效）

是否可以在 Redux RTK 查詢配置中訂閱任何類型的此類事件？

Answer 1

您可以透過使標記無效來觸發訂閱的查詢重新查詢。

請參閱invalidateTags：Redux 操作建立器，可用來手動使 的快取標籤失效自動重新取得。

假設getAllEmployees 端點提供了一個標籤，例如“employees”，您可以調度一個操作來使該標記無效並觸發useGetAllEmployeesQuery 掛鉤來重新獲取數據。

const api = createApi({
  ...
  endpoints: builder => ({
    ...
    getAllEmployees: builder.query({
      query: ......,
      ...
      providesTags: ["employees"],
    }),
    ...
  }),
});

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import api from '../path/to/apiSlice';

export function useRefetchOnMessage (messageType = "", tags = []) {
  const dispatch = useDispatch();

  useEffect(() => {
    const handleMessage = () => {
      dispatch(api.util.invalidateTags(tags));
    };

    window.io?.socket?.on(messageType, handleMessage);

    return () => {
      window.io?.socket?.off(messageType, handleMessage);
    }
  }, [messageType, tags]);
}

UI 程式碼只需呼叫掛鉤，將 "employees" 標記傳遞給 useRefetchOnMessage 掛鉤。

const employees = useGetAllEmployeesQuery(officeId);
useRefetchOnMessage('employees changed', ["employees"]);