Saya mahu menyegerakkan aplikasi SPA React untuk semua pengguna (berbilang tab, berbilang pengguna). Saya menulis cangkuk reaktif mudah yang mendengar mesej IO soket tertentu dan mengemas kini pembolehubah keadaan berdasarkan mesej bernama 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
}
Apabila acara ini dihantar, saya hanya memanggil kaedah RTK refetch().
const employees = useGetAllEmployeesQuery(officeId)
const needRefreshEmployees = useRefetchOnMessage('employees changed')
useEffect(() => {
if (!needRefreshEmployees) return
employees.refetch()
}, [needRefreshEmployees])
Jadi kita perlu memanggilnya di mana-mana dalam aplikasi, katakan kita mempunyai 5 komponen yang menggunakan pertanyaan pekerja, kita perlu memanggil refetch dalam semua komponen. Banyak pertanyaan hanya perlu dijalankan sekali sahaja untuk dijalankan. (Tidak sah sekali)
Adakah mungkin untuk melanggan sebarang jenis acara sedemikian dalam konfigurasi pertanyaan Redux RTK?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh mencetuskan pertanyaan yang dilanggan repertanyaan dengan membatalkan teg.
Lihat invalidateTags: pencipta tindakan Redux yang boleh digunakan untuk membatalkan teg cache secara manual dan mengambilnya semula secara automatik .
Anggap
getAllEmployees端点提供了一个标签，例如“employees”，您可以调度一个操作来使该标记无效并触发useGetAllEmployeesQuerycangkuk untuk mengambil semula data.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]); }Kod UI hanya perlu memanggil cangkuk,
"employees"标记传递给useRefetchOnMessagecangkuk.const employees = useGetAllEmployeesQuery(officeId); useRefetchOnMessage('employees changed', ["employees"]);