Bagaimana untuk membatalkan semua pertanyaan Redux RTK apabila menghantar acara khas (mesej IO soket)?

Question

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?

Answer 1

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”，您可以调度一个操作来使该标记无效并触发 useGetAllEmployeesQuery cangkuk 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" 标记传递给 useRefetchOnMessage cangkuk.

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