Boîte à outils Redux complète (Partie - 4)

Partie 4 : Sujets avancés dans la requête RTK.

Cette partie se concentrera sur les fonctionnalités avancées et les cas d'utilisation de RTK Query, notamment la personnalisation des requêtes, la gestion de l'authentification, les mises à jour optimistes et l'optimisation des performances.

Partie 4 : Sujets avancés dans la requête RTK

1. Introduction aux concepts avancés de requête RTK

Dans la partie précédente, nous avons couvert les bases de l'utilisation de RTK Query pour récupérer et muter des données. Nous allons maintenant nous plonger dans des fonctionnalités plus avancées qui rendent RTK Query encore plus puissant. Ces fonctionnalités vous permettent de personnaliser les requêtes, de gérer l'authentification, d'optimiser les performances et de gérer les mises à jour optimistes pour une expérience utilisateur plus fluide.

2. Personnalisation de baseQuery pour l'authentification

Lorsque vous travaillez avec des API qui nécessitent une authentification, vous devez personnaliser la baseQuery pour inclure des en-têtes d'authentification tels que des jetons JWT ou des clés API.

Étape 1 : Créer une requête de base personnalisée

Vous pouvez créer une fonction baseQuery personnalisée qui ajoute des en-têtes d'autorisation à chaque demande.

// src/app/customBaseQuery.js
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = fetchBaseQuery({
  baseUrl: 'https://jsonplaceholder.typicode.com/',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token; // Assuming auth slice has token
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

export default customBaseQuery;

Explication :

• prepareHeaders : Cette fonction vous permet de personnaliser les en-têtes pour chaque requête. Il récupère le jeton du magasin Redux et l'attache à l'en-tête Authorization.

Étape 2 : Utilisez la requête de base personnalisée dans createApi

Modifiez votre fichier postsApi.js pour utiliser la baseQuery personnalisée :

// src/features/posts/postsApi.js
import { createApi } from '@reduxjs/toolkit/query/react';
import customBaseQuery from '../../app/customBaseQuery';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: customBaseQuery, // Use the custom base query here
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

3. Mises à jour optimistes avec requête RTK

Les mises à jour optimistes vous permettent de mettre à jour immédiatement l'interface utilisateur avant que le serveur ne confirme la mutation, offrant ainsi une expérience utilisateur plus fluide. Si le serveur renvoie une erreur, l'interface utilisateur peut revenir à l'état précédent.

Étape 1 : implémenter des mises à jour optimistes dans les mutations

Vous pouvez implémenter des mises à jour optimistes à l'aide de la méthode de cycle de vie onQueryStarted fournie par RTK Query.

// src/features/posts/postsApi.js
addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
  invalidatesTags: ['Post'],
  onQueryStarted: async (newPost, { dispatch, queryFulfilled }) => {
    // Optimistic update: immediately add the new post to the cache
    const patchResult = dispatch(
      postsApi.util.updateQueryData('fetchPosts', undefined, (draftPosts) => {
        draftPosts.push({ id: Date.now(), ...newPost }); // Fake ID for optimistic update
      })
    );
    try {
      await queryFulfilled; // Await server response
    } catch {
      patchResult.undo(); // Revert if the mutation fails
    }
  },
}),

Explication :

• onQueryStarted : cette méthode de cycle de vie est déclenchée lorsqu'une mutation démarre. Il fournit des paramètres de répartition et de requêteFulfilled pour gérer les mises à jour du cache.
• postsApi.util.updateQueryData : Cette fonction utilitaire vous permet de mettre à jour de manière optimiste les données mises en cache.
• patchResult.undo() : annule la mise à jour optimiste si le serveur renvoie une erreur.

4. Gestion des requêtes dépendantes

Parfois, vous devrez peut-être effectuer des requêtes dépendantes, où une requête dépend du résultat d'une autre. RTK Query fournit le paramètre skip pour contrôler le moment où une requête est exécutée.

Exemple : récupérer les détails de la publication en fonction de l'ID de publication sélectionné

// src/features/posts/PostDetails.js
import React from 'react';
import { useFetchPostQuery } from './postsApi';

const PostDetails = ({ postId }) => {
  const { data: post, error, isLoading } = useFetchPostQuery(postId, { skip: !postId });

  if (!postId) return <p>Select a post to view details.</p>;
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading post details.</p>;

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default PostDetails;

Explication :

• useFetchPostQuery : un hook de requête qui prend postId comme argument. Si postId n'est pas fourni, la requête est ignorée en utilisant { skip: !postId }.

5. Interrogation et données en temps réel avec requête RTK

RTK Query prend en charge l'interrogation pour conserver les données à jour à un intervalle spécifié. Ceci est utile pour la synchronisation des données en temps réel.

Étape 1 : Utiliser l'interrogation dans les requêtes

Vous pouvez activer l'interrogation pour n'importe quelle requête à l'aide de l'option pollingInterval.

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery(undefined, {
    pollingInterval: 30000, // Poll every 30 seconds
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <section>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

Explication :

• pollingInterval : cette option spécifie l'intervalle (en millisecondes) auquel la requête doit interroger le serveur pour de nouvelles données.

6. Optimisation des performances avec selectFromResult

RTK Query fournit l'option selectFromResult pour des optimisations avancées des performances en vous permettant de sélectionner des données spécifiques dans le résultat de la requête.

Étape 1 : Utilisation de selectFromResult pour optimiser les rendus

L'option selectFromResult peut être utilisée pour éviter les nouveaux rendus inutiles lorsque seul un sous-ensemble du résultat de la requête est nécessaire.

// src/features/posts/PostTitleList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2>Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key={index}>{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

Explication :

• selectFromResult : cette option vous permet de sélectionner uniquement les titres des publications récupérées, évitant ainsi les rendus inutiles lorsque d'autres données du résultat de la requête changent.

7. Conclusion et prochaines étapes

Dans cette partie, nous avons exploré des sujets avancés dans RTK Query, tels que la personnalisation de baseQuery pour l'authentification, la gestion des mises à jour optimistes, la gestion des requêtes dépendantes, l'utilisation de l'interrogation pour la synchronisation des données en temps réel et l'optimisation des performances avec selectFromResult. Le riche ensemble de fonctionnalités de RTK Query en fait un outil puissant pour gérer la récupération et la mise en cache des données dans les applications Redux modernes.

Dans la partie suivante, nous discuterons des Stratégies de test pour Redux Toolkit et RTK Query, couvrant les tests unitaires, les tests d'intégration et les meilleures pratiques pour garantir un code robuste et maintenable.

Restez à l'écoute pour la Partie 5 : Stratégies de test pour Redux Toolkit et RTK Query !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!