Comment invalider toutes les requêtes Redux RTK lors de l'envoi d'événements spéciaux (messages socket IO) ?

Question

Je souhaite synchroniser une application SPA React pour tous les utilisateurs (plusieurs onglets, plusieurs utilisateurs). J'ai écrit un simple hook réactif qui écoute les messages spécifiques du socket IO et met à jour une variable d'état basée sur le message nommé 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
}

Lorsque cet événement est envoyé, j'appelle simplement la méthode RTK refetch().

const employees = useGetAllEmployeesQuery(officeId)

const needRefreshEmployees = useRefetchOnMessage('employees changed')

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

  employees.refetch()
}, [needRefreshEmployees])

Nous devons donc l'appeler partout dans l'application, disons que nous avons 5 composants qui utilisent la requête des employés, nous devons appeler refetch dans tous les composants. De nombreuses requêtes ne doivent être exécutées qu’une seule fois pour être exécutées. (Invalide une fois)

Est-il possible de s'abonner à tout type d'événements de ce type dans la configuration des requêtes Redux RTK ?

Answer 1

Vous pouvez déclencher une requête d'abonnement requery en invalidant le tag.

Voir invalidateTags : un créateur d'action Redux qui peut être utilisé pour invalider manuellement les balises de cache et les récupérer automatiquement .

Supposez getAllEmployees 端点提供了一个标签，例如“employees”，您可以调度一个操作来使该标记无效并触发 useGetAllEmployeesQuery des hooks pour récupérer les données.

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]);
}

Le code de l'interface utilisateur a juste besoin d'appeler le crochet, "employees" 标记传递给 useRefetchOnMessage le crochet.

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