Maîtrisez REDUX et Redux Toolkit avec React JS

Catégories : axios, Javascript, React, Redux
Liste de souhaits Partager
Partager le cours
Lien de la page
Partager sur les réseaux sociaux

À propos du cours

Bienvenue dans la meilleure formation Redux & Redux Toolkit en Français! 

Section 1:

Je vais aller droit au but et vous indiquer clairement ce que vous allez apprendre dans cette formation:

  • Vidéo 1: Dans la première vidéo d’introduction, je vous explique, d’une manière globale et théorique, le concept de Redux. On verra pourquoi utiliser cette bibliothèque, est-elle obligatoire? On abordera les notions indispensables à retenir, et on finira avec les prérequis et les outils indispensables avant de se lancer dans la formation.
  • Vidéo 2: Dans cette vidéo, nous allons étudier principalement les actions dans Redux. On verra que ces actions sont des objets ayant la propriété type et qu’on peut générer vis des fonctions de création d’action “Action Creator”.
  • Vidéo 3: Dans cette vidéo, nous allons voir le Reducer dans Redux. On verra que ce dernier est une fonction pure (pure function) qui accepte deux arguments (prevState et l’action). Ce Reducer est le moyen qui va nous permettre de manipuler notre Redux Store.
  • Vidéo 4: Dans cette vidéo, nous allons créer notre Redux Store. Pour cela, on va devoir utiliser la méthode createStore() à laquelle nous allons devoir passer notre Reducer en tant que “argument”. createStore(monReducer).
  • Vidéo 5: Dans cette vidéo, nous allons voir comment gérer deux actions au niveau de notre reducer (partie 1).
  • Vidéo 6: Dans cette vidéo, nous allons continuer avec la gestion de plusieurs actions via différents reducers.
  • Vidéo 7: Dans cette vidéo, nous allons mettre en pratique les notions de Redux étudiées jusqu’ici dans une application React JS. Pour cela, on aura besoin de la bibliothèque React-Redux que nous allons devoir installer dans nos dépendances via NPM.
  • Vidéo 8: Dans cette vidéo, nous allons continuer la mise en pratique des notions Redux dans une application React. Nous allons donc obtenir Redux dans notre application React. Pour cela, nous allons devoir installer le package “redux” au niveau des dépendances. Cela va nous permettre de créer notre Redux Store dans notre application. Nous allons également devoir installer le package “react-redux” pour l’avoir dans nos dépendances React afin de nous permettre de connecter les deux librairies “React et Redux”. Cette dépendance va nous permettre via le “Provider” de passer le redux store via un props pour qu’il puisse être accessible partout dans notre application React. Cela vous semble compliquer? Ne vous inquiétez pas, c’est un véritable jeu d’enfant. 
  • Vidéo 9: Dans cette vidéo, nous allons continuer la mise en pratique des notions Redux dans une application React. Nous allons donc importer la méthode connect de react-redux qui va nous permettre de générer un composant d’ordre supérieur (Higher Order Component) afin de pourvoir accéder au Redux Store et y récupérer des données. Pour cela, nous allons devoir passer un argument “mapStateToProps” à la méthode connect. C’est une fonction qui va nous permettre de récupérer le state en tant que props.
  • Vidéo 10: Dans cette vidéo, nous allons passer à la méthode connect un deuxième argument “mapDispatchToProps” qui est une fonction qui va nous permettre de passer la méthode dispatch en tant que props. Il suffit alors d’importer l’action qu’on souhaite dispatcher et la passer en tant que argument à notre dispatch.
  • Vidéo 11: Dans cette vidéo, nous allons apprendre à utiliser le Hook useSelector comme alternative à mapStateToProps. Pour cela, on aura plus besoin de passer par le composant d’ordre supérieur connect().
  • Vidéo 12: Dans cette vidéo, nous allons apprendre à utiliser le Hook useDispatch comme alternative à mapDispatchToProps. Là aussi, on aura plus besoin de passer par le composant d’ordre supérieur connect().
  • Vidéo 13: Dans cette vidéo, nous allons jeter un coup d’oeil à la documentation Redux et celle de React-Redux et voir l’intérêt de la documentation en programmation.
  • Vidéo 14: Dans cette vidéo, nous allons créer une nouvelle action qui sera gérée via un second reducer. Cela va nous permettre d’apprendre à combiner plusieurs reducers dans une application React.
  • Vidéo 15: Dans cette vidéo, nous allons découvrir le payload dans les actions. En effet, jusqu’ici, nous avons vu simplement le type dans l’objet de notre action. En plus de ce payload, nous pouvons également spécifier une autre propriété.
  • Vidéo 16: Dans cette vidéo, nous allons voir, d’une manière théorique, comment effectuer des “get requests” et gérer les actions asynchrones via le middleware thunk.
  • Vidéo 17: Dans cette vidéo, nous allons voir concrètement comment effectuer des get request et gérer les actions asynchrones via le middleware thunk.
  • Vidéo 18: Dans cette vidéo, nous allons voir comment installer et utiliser l’extension Redux Devtools.
  • Vidéo 19: A partir de la vidéo 19 jusqu’à la vidéo 31, nous allons coder ensemble une petite application BOOKS. Le but de cette application React/Redux est de mettre en pratique les concepts étudiés tout au long de cette formation “Redux avec React”.
  • On verra donc comment dispatcher des actions pour créer un livre dans notre bibliothèque BOOKS.
  •   On verra comment dispatcher une autre action pour supprimer un livre bien spécifique ou effacer tous les livres existants.
  •  Ces actions dispatchées seront gérées via des reducers.
  • On verra comment récupérer les livres au niveau de l’API Google Books. Pour cela, on aura besoin de axios et du MiddleWare “Thunk”.
  • Pour pouvoir interroger l’API Google Books, nous allons devoir préciser le sujet du livre dans un moteur de recherche.
  •  Une fois la requête envoyée, on affiche un spinner pour indiquer à l’utilisateur qu’on est en train d’interroger l’API.
  •  Tout cela va être géré via le Reducer qui capte une action bien spécifique par rapport à ce cas.
  •  Une fois les livres récupérés, on dispachera une autre action pour enregistrer les livres et les afficher dans une liste désordonnée.
  •  En cliquant sur un élément dans cette liste, on va déployer une section pour accéder aux informations du livre sélectionné.
  •  On affichera un thumbnail de la couverture du livre, le titre du livre, l’auteur, et une petite description.
  •  Sous cette section, on aura deux boutons. Le premier bouton permet d’ouvrir un nouvel onglet afin de nous donner accès au livre directement sur Google Books. Le deuxième, nous permet de l’enregistrer dans notre bibliothèque. Là aussi on dispachera une action on passant un objet dans le type pour que le Reducer puisse mettre à jour le state et inclure le livre parmi ceux déjà existants dans la bibliothèque Books.
  •  Pour ne pas perdre les livres enregistrés, ces derniers seront enregistrés dans le localStorage.

Quiz de 10 questions pour évaluer vos connaissances.

SECTION 2: Chargement de 33 nouvelles vidéos pour aborder REDUX TOOLKIT !!!

Dans cette nouvelles section, nous allons :

  1. Étudier les concepts de REDUX TOOLKIT via une série d’exercices.
  2. Adapter l’application BOOKS à Redux Toolkit

Bonne formation à tous.

Donkey Geek.

Afficher plus

Qu’allez-vous apprendre ?

  • Maîtriser les concepts de Redux
  • Débogguer une application Redux
  • Comprendre les actions et le Payload
  • Comprendre le Reducer
  • Comment créer un Store
  • Gérer plusieurs actions
  • Combiner plusieurs Reducers
  • Comprendre la librairie React-Redux
  • Utiliser un Store Provider
  • MapStateToPros et MapDispatchToPros
  • Maîtriser le Hook useSelector
  • Maîtriser le Hook useDispatch
  • Utiliser Redux avec la librairie React JS
  • Découvrir le Tunk Middleware
  • Travailler avec du code asynchrone
  • Les requêtes HTTP via Thunk et Axios
  • On termine la première section redux par la réalisation d'une application REACT avec REDUX, AXIOS, l'API Google BOOKS, le Local Storage et plus encore...
  • Apprendre Redux Toolkit avec des exercices très simple accessibles à tous (33 nouvelles vidéos)
  • Adapter l'application BOOKS Google API codée avec Redux à la version Redux Toolkit

Contenu du cours

Tous les chapitres de la formation
Pour un apprentissage plus fluide, j'ai décidé de combiner tous les chapitres de la formation dans une seule section.

  • 1 – Introduction à Redux
    17:18
  • Udemy ou SuccessCoder ?
  • Télécharger l’application de l’exercice suivant
  • 2 – Actions dans Redux
    09:17
  • 3 – Reducer dans Redux
    09:14
  • 4 – Redux Store via createStore
    13:21
  • Petite correction au niveau du Slide
  • Télécharger l’application de l’exercice suivant
  • 5 – Gestion de plusieurs actions
    12:53
  • Télécharger l’application de l’exercice suivant
  • 6 – Combiner plusieurs Reducers
    23:25
  • Création d’une application React
  • 7 – React-Redux, Action et Reducer
    17:27
  • Note relative à la méthode createStore()
  • 8 – React-Redux Store Provider
    09:43
  • 9 – Connect HOC et mapStateToProps
    10:35
  • Note concernant le Dispatch
  • 10 – Connect HOC et mapDispatchToProps
    07:10
  • 11 – useSelector Hook
    06:39
  • 12 – useDispatch Hook
    03:55
  • 13 – La documentation Redux et React-Redux
    17:56
  • 14 – combineReducers dans une app React
    24:17
  • CSS du Input
  • 15 – Redux Action Payload
    12:20
  • 16 – Middleware – applyMiddleware
    08:54
  • 17 – Thunk Middleware
    49:07
  • Télécharger l’application Shop
  • Note Redux-devtools
  • 18 – L’extension Redux DevTools
    22:07

Coder une petite application BOOKS avec React et Redux
Dans cette section, nous allons coder ensemble une petite application BOOKS. Le but de cette application React/Redux est de mettre en pratique les concepts étudiés tout au long de cette formation "Redux avec React". On verra donc comment dispatcher des actions pour créer un livre dans notre bibliothèque BOOKS. On verra comment dispatcher une autre action pour supprimer un livre bien spécifique ou effacer tous les livres existants. Ces actions dispatchées seront gérées via des reducers. On verra comment récupérer les livres au niveau de l'API Google Books. Pour cela, on aura besoin de axios et du MiddleWare "Thunk". Pour pouvoir interroger l'API Google Books, nous allons devoir préciser le sujet du livre dans un moteur de recherche. Une fois la requête envoyée, on affiche un spinner pour indiquer à l'utilisateur qu'on est en train d'interroger l'API. Tout cela va être géré via le Reducer qui capte une action bien spécifique par rapport à ce cas. Une fois les livres récupérés, on dispachera une autre action pour enregistrer les livres et les afficher dans une liste désordonnée. En cliquant sur un élément dans cette liste, on va déployer une section pour accéder aux informations du livre sélectionné. On affichera un thumbnail de la couverture du livre, le titre du livre, l'auteur, et une petite description. Sous cette section, on aura deux boutons. Le premier bouton permet d'ouvrir un nouvel onglet afin de nous donner accès au livre directement sur Google Books. Le deuxième, nous permet de l'enregistrer dans notre bibliothèque. Là aussi on dispachera une action on passant un objet dans le type pour que le Reducer puisse mettre à jour le state et inclure le livre parmi ceux déjà existants dans la bibliothèque Books. Pour ne pas perdre les livres enregistrés, ces derniers seront enregistrés dans le localStorage.

QUIZ
Quiz de 10 questions pour évaluer vos connaissances.

REDUX TOOLKIT
Dans cette nouvelle section, nous allons découvrir la nouvelle façon de gérer notre state via REDUX TOOLKIT. Une nouvelle façon bien plus simplifiée de travailler avec la logique de Redux.

Coder une application React avec Redux Toolkit
Dans cette section, nous allons reprendre notre application BOOKS pour la mettre à jour avec Redux Toolkit

Updates, news & autres infos utiles
Dans cette sections, vous trouverez quelques informations relatives aux mises à jour de la formation et autres informations utiles. Pensez à y jeter un coup d’œil régulièrement :-)

Notes et avis de l’apprenant

Encore aucun avis !
Encore aucun avis !