CATALOGUE Code & Data Formation Redux Apprendre Redux Guide d'Utilisation de Redux DevTools

Guide d'Utilisation de Redux DevTools

Installer les Redux DevTools

Vidéo non disponible ! Réessayez plus tard

2h 4min

27 leçons

Transcription

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

2h 4min

27 leçons

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Initialisation et Configuration

Objectifs

Les objectifs de cette vidéo sont de :

Installer et configurer Redux DevTools.
Comprendre comment utiliser cette extension pour surveiller les actions Redux.
Apprendre à basculer entre les environnements de développement et de production pour une utilisation optimale.

Résumé

Cette leçon explique comment utiliser Redux DevTools pour surveiller et déboguer les actions de votre application Redux.

Description

Dans cette vidéo, nous allons explorer l'installation et l'utilisation de Redux DevTools pour améliorer le développement de vos applications Redux. Vous apprendrez à :

1. Installer Redux DevTools : Nous commencerons par l'installation de cette extension sur votre navigateur ou comme application Electron si vous utilisez d'autres navigateurs que Chrome ou Firefox.

2. Configurer le Store Redux : Vous découvrirez comment configurer votre store Redux pour activer Redux DevTools, en utilisant des variables d'environnement pour basculer entre un environnement de développement et de production.

3. Déboguer avec Redux DevTools : Nous vous montrerons comment utiliser l'interface de Redux DevTools pour suivre les actions déclenchées, inspecter l'état du store, et identifier les erreurs potentielles.

En suivant cette guide, vous serez mieux outillé pour développer et maintenir des applications Redux robustes et performantes.

Questions fréquentes

Qu'est-ce que Redux DevTools ?

Redux DevTools est une extension de navigateur qui permet de surveiller et déboguer les actions dans les applications Redux.

Pourquoi désactiver Redux DevTools en production ?

Redux DevTools est gourmand en ressources et peut affecter les performances de l'application en production.

Comment ajouter Redux DevTools à un store Redux ?

Utilisez la fonction Compose et encadrez ApplyMiddleware avec DevTools extension pour connecter Redux DevTools à votre store.

Programme détaillé

Accueil de la formation

Module 1 - Pré-requis

Présentation de Redux 01:09

L'état de mon application 00:32

Décrire les changements avec des actions 01:41

Fonctions pures et impures 01:26

La fonction reducer 00:50

Module 2 - Utiliser Redux

Mon premier reducer 05:54

Créer et observer le store 04:29

Réimplémenter createStore de Redux 05:47

Exemple avec React 04:36

Utiliser le spread operator dans les reducers 03:46

Module 3 - Créer une TODO List - Configurer les reducers

Ajouter un élément à la liste 04:33

Changer le status d'un élement de la liste 03:33

Composer des tableaux avec des reducers 05:12

Composer des objets avec des reducers 04:39

Composer avec combineReducers 01:30

Réimplémenter combineReducers de Redux 06:31

Module 4 - Créer une TODO List - Utiliser Redux avec React

Ajouter une todo 12:48

Changer l'état d'une todo 03:34

Filtrer la liste des todos 05:51

Optimiser la structure du projet 07:05

Module 5 - Utiliser l'API Context

Réimplémenter le Provider de react-redux 09:24

Installer le Provider de react-redux 01:11

Connecter un container au store Redux 09:45

Module 6 - Améliorer son projet

Optimiser les actions 03:00

Utiliser bindActionCreators de Redux 04:48

Création d'un middleware 07:24

Installer les Redux DevTools 04:00