Maison interface Web js tutoriel Boîte à outils Redux complète (Partie -

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

Sep 10, 2024 pm 10:35 PM

Complete redux toolkit (Part -

Partie 3 : Introduction à la requête RTK

Dans cette partie, nous aborderons la requête RTK

1. Qu'est-ce que la requête RTK ?

Bien que Redux Toolkit fournisse des outils puissants pour gérer l'état et la logique asynchrone, il nécessite toujours un code passe-partout important pour gérer la récupération et la mise en cache des données. RTK Query, introduit dans Redux Toolkit v1.6, vise à résoudre ce problème en fournissant un ensemble d'outils puissants pour une récupération et une mise en cache efficaces des données avec une configuration minimale.

Principales fonctionnalités de la requête RTK :

  • Récupération et mise en cache des données : Gère automatiquement la mise en cache, l'invalidation et la récupération.
  • Mises à jour optimistes et synchronisation en temps réel : Gérez facilement les mises à jour optimistes et la synchronisation des données en temps réel.
  • API déclarative et simple : Conception d'API intuitive avec un minimum de code passe-partout.
  • Intégré à Redux Toolkit : Construit sur Redux Toolkit, permettant une intégration transparente.

2. Configuration de la requête RTK

Pour démarrer avec RTK Query, nous devons définir un service API qui spécifie comment récupérer les données et quels points de terminaison sont disponibles. Créons un exemple en utilisant une simple API de publications.

Étape 1 : Définir un service API

Créez un nouveau fichier nommé postsApi.js dans le répertoire feature/posts. Ce fichier définira les points de terminaison de l'API pour la récupération et la mutation des publications.

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

// Define an API service using RTK Query
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

Explication :

  • createApi : Cette fonction permet de définir un service API. Il génère une tranche API, gérant automatiquement le magasin, les réducteurs et les actions pour vous.
  • baseQuery : une fonction qui définit l'URL de base de votre API. fetchBaseQuery est un wrapper léger autour de l'API de récupération standard.
  • points de terminaison : fonction qui définit les points de terminaison de l'API. Nous définissons ici deux points de terminaison : fetchPosts pour interroger les données et addPost pour créer une nouvelle publication.

Étape 2 : Intégrer le service API dans le Redux Store

Ajoutez le réducteur postsApi au magasin et configurez le middleware pour activer la mise en cache et l'invalidation.

Mettre à jour store.js pour intégrer postsApi :

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

export default store;

3. Utilisation de la requête RTK dans les composants

RTK Query génère des hooks personnalisés basés sur les points de terminaison définis dans le service API. Ces hooks sont utilisés pour effectuer la récupération de données, les mutations et gérer automatiquement la mise en cache.

Étape 1 : Récupération de données avec useFetchPostsQuery

Créez un composant PostsList.js pour récupérer et afficher la liste des publications.

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

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery();

  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 :

  • useFetchPostsQuery : un hook personnalisé généré par RTK Query pour le point de terminaison fetchPosts. Il renvoie un objet contenant les données récupérées (data), l'état de chargement (isLoading) et l'état d'erreur (error).
  • Le composant restitue de manière conditionnelle les états de chargement, d'erreur ou de données en fonction de la sortie du hook.

Étape 2 : ajout de données avec useAddPostMutation

Créez un composant AddPostForm.js pour ajouter de nouvelles publications à l'aide de la mutation addPost.

// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';

const AddPostForm = () => {
  const [addPost, { isLoading }] = useAddPostMutation();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      await addPost({ title, body: content }).unwrap();
      setTitle('');
      setContent('');
    }
  };

  return (
    <section>
      <h2>Add a New Post</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Post Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Post Content"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </section>
  );
};

export default AddPostForm;

Explication :

  • useAddPostMutation : un hook personnalisé généré par RTK Query pour la mutation addPost. Il fournit une fonction (addPost) pour déclencher la mutation et un état de chargement (isLoading).
  • unwrap() : nous permet de déballer la charge utile résolue ou rejetée de la mutation pour gérer les effets secondaires après la demande.

4. Gestion du cache, des erreurs et des mises à jour optimistes

RTK Query gère automatiquement la mise en cache, les états d'erreur et invalide le cache lorsque des mutations se produisent. Vous pouvez personnaliser davantage le comportement avec des balises et d'autres configurations.

Étape 1 : Utilisation de ProvideTags et d'invalidatesTags

Modifiez postsApi pour utiliser des balises pour l'invalidation du cache :

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

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  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;

Explication :

  • provideTags : ceci est utilisé pour baliser les données extraites de la requête fetchPosts. Cela aide à invalider efficacement le cache lorsque de nouvelles données sont ajoutées.
  • invalidatesTags : Ceci est utilisé dans la mutation addPost pour invalider le cache et récupérer les données mises à jour.

5. Conclusion et prochaines étapes

Dans cette partie, nous avons exploré comment utiliser RTK Query pour gérer la récupération et la mise en cache des données dans les applications Redux. Nous avons couvert la configuration d'un service API, la définition des points de terminaison et l'utilisation des hooks générés pour interroger et muter les données. RTK Query simplifie la récupération de données et la gestion de l'état avec un minimum de code, ce qui en fait un outil puissant pour les applications Redux modernes.

다음 부분에서는 쿼리 사용자 정의, baseQuery 사용, 인증 처리, 성능 최적화 등 RTK 쿼리의 고급 주제에 대해 자세히 살펴보겠습니다.

4부: RTK 쿼리의 고급 주제를 계속 지켜봐주세요!

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel PHP
1600
276
Types conditionnels avancés en dactylographie Types conditionnels avancés en dactylographie Aug 04, 2025 am 06:32 AM

Les types de conditions avancées de TypeScript implémentent le jugement logique entre les types via TextendU? X: Y Syntaxe. Ses capacités de base se reflètent dans les types de conditions distribuées, l'inférence de type inférieure et la construction d'outils de type complexe. 1. Le type conditionnel est distribué dans les paramètres de type nu et peut automatiquement diviser le type de joint, tel que pour obtenir la chaîne [] | nombre []. 2. Utiliser la distribution pour construire des outils de filtrage et d'extraction: exclut exclut les types via TextendU? Never: T, extraire extrait les points communs via TextendU? T: jamais, et des filtres non nuls nuls / non définis. 3

Architecture Micro Frontend: un guide de mise en œuvre pratique Architecture Micro Frontend: un guide de mise en œuvre pratique Aug 02, 2025 am 08:01 AM

MicrofronttendSSolvescalingCallegengeSInLargeTeamsByAnabled indépendante développement et élaboration de choOsanIntegrationsStrategy: UseModuleFederationInwebpack5ForruntimeLoadingAndTrue Independence, Build-Time IntegrationForsIpleSetups, Oriframes / webcomponents webcomponents

Quelles sont les différences entre VAR, LET et const dans JavaScript? Quelles sont les différences entre VAR, LET et const dans JavaScript? Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

Qu'est-ce que le chaînage facultatif (?.) Dans JS? Qu'est-ce que le chaînage facultatif (?.) Dans JS? Aug 01, 2025 am 06:18 AM

FacultatifChaining (?.) Injavascriptsafely accessifiedProperties enrituration

Générer des puzzles à double chocolat résolus: un guide des structures de données et des algorithmes Générer des puzzles à double chocolat résolus: un guide des structures de données et des algorithmes Aug 05, 2025 am 08:30 AM

Cet article explore en profondeur comment générer automatiquement des puzzles solvables pour le jeu de puzzle à double choco. Nous introduirons une structure de données efficace - un objet cellulaire basé sur une grille 2D qui contient des informations limites, des couleurs et de l'état. Sur cette base, nous développerons un algorithme récursif de reconnaissance de blocs (similaire à la recherche en profondeur-première) et comment l'intégrer dans le processus de génération de puzz itérative pour garantir que les énigmes générées respectent les règles du jeu et sont résolubles. L'article fournira un exemple de code et discutera des considérations clés et des stratégies d'optimisation dans le processus de génération.

Comment pouvez-vous supprimer une classe CSS d'un élément DOM à l'aide de JavaScript? Comment pouvez-vous supprimer une classe CSS d'un élément DOM à l'aide de JavaScript? Aug 05, 2025 pm 12:51 PM

La méthode la plus courante et recommandée pour supprimer les classes CSS des éléments DOM à l'aide de JavaScript est via la méthode Suppor () de la propriété ClassList. 1. Utilisez Element.ClassList.Remove ('ClassName') pour supprimer en toute sécurité une seule ou plusieurs classes, et aucune erreur ne sera signalée même si la classe n'existe pas; 2. La méthode alternative consiste à utiliser directement la propriété ClassName et à supprimer la classe par remplacement de chaîne, mais il est facile de causer des problèmes en raison d'une correspondance régulière ou d'un traitement d'espace incorrect, donc il n'est pas recommandé; 3. Vous pouvez d'abord juger si la classe existe, puis la supprimer via element.classList.Contains (), mais ce n'est généralement pas nécessaire; 4.Classlist

Quelle est la syntaxe de classe en JavaScript et comment est-elle liée aux prototypes? Quelle est la syntaxe de classe en JavaScript et comment est-elle liée aux prototypes? Aug 03, 2025 pm 04:11 PM

La syntaxe de classe de JavaScript est un sucre syntaxique hérité par les prototypes. 1. La classe définie par la classe est essentiellement une fonction et des méthodes sont ajoutées au prototype; 2. Les instances recherchent les méthodes à travers la chaîne prototype; 3. La méthode statique appartient à la classe elle-même; 4. s'étend dans la chaîne prototype et la couche sous-jacente utilise toujours le mécanisme du prototype. La classe n'a pas changé l'essence de l'héritage du prototype JavaScript.

Vercel Spa Routing et chargement des ressources: résoudre les problèmes d'accès aux URL profonds Vercel Spa Routing et chargement des ressources: résoudre les problèmes d'accès aux URL profonds Aug 13, 2025 am 10:18 AM

Cet article vise à résoudre le problème du rafraîchissement de l'URL profond ou de l'accès direct, provoquant une défaillance de chargement des ressources de la page lors du déploiement d'applications (spas) de page unique sur Vercel. Le noyau est de comprendre la différence entre le mécanisme de réécriture de routage de Vercel et les chemins relatifs d'analyse du navigateur. En configurant Vercel.json pour rediriger tous les chemins vers index.html et corriger la méthode de référence des ressources statiques dans HTML, modifiez le chemin relatif en chemin absolu, en vous assurant que l'application peut charger correctement toutes les ressources sous n'importe quelle URL.

See all articles