Boîte à outils Redux complète (Partie -
Sep 10, 2024 pm 10:35 PMPartie 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

Remplacer les caractères de chaîne en javascript

jQuery obtient un rembourrage / marge d'élément

jQuery Vérifiez si la date est valide

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console

Tutoriel de configuration de l'API de recherche Google personnalisé

jQuery Ajouter une barre de défilement à div
