我想為所有用戶（多個選項卡，多個用戶）同步 SPA React 應(yīng)用程序。我編寫了一個簡單的反應(yīng)鉤子，它監(jiān)聽特定的套接字 IO 消息并根據(jù)名為 useGetAllEmployeesQuery 的消息更新狀態(tài)變量：
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
}
當(dāng)調(diào)度此事件時，我只需調(diào)用 RTK refetch() 方法。
const employees = useGetAllEmployeesQuery(officeId)
const needRefreshEmployees = useRefetchOnMessage('employees changed')
useEffect(() => {
if (!needRefreshEmployees) return
employees.refetch()
}, [needRefreshEmployees])
因此我們需要在應(yīng)用程序中的任何地方調(diào)用它，假設(shè)我們有 5 個使用員工查詢的組件，我們需要在所有組件中調(diào)用 refetch 。許多查詢只要運行一次就足夠了，就可以運行。 （一次無效）
是否可以在 Redux RTK 查詢配置中訂閱任何類型的此類事件？
1
0
0
您可以通過使標(biāo)記無效來觸發(fā)訂閱的查詢重新查詢。
請參閱invalidateTags：Redux 操作創(chuàng)建器，可用于手動使 的緩存標(biāo)簽失效自動重新獲取。
假設(shè) getAllEmployees 端點提供了一個標(biāo)簽，例如“employees”，您可以調(diào)度一個操作來使該標(biāo)記無效并觸發(fā) useGetAllEmployeesQuery 掛鉤來重新獲取數(shù)據(jù)。
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 代碼只需調(diào)用掛鉤，將 "employees" 標(biāo)記傳遞給 useRefetchOnMessage 掛鉤。
const employees = useGetAllEmployeesQuery(officeId);
useRefetchOnMessage('employees changed', ["employees"]);
