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