4.75 out of 5
4.75
117 reviews on Udemy

Maîtriser REDUX et REDUX TOOLKIT avec React JS – 2024 [FR]

Apprendre Redux et Redux Toolkit avec des visuels et du code simple. Accessible à tous les niveaux (Débutants & Pros)
Instructor:
DONKEYGEEK Tahar
1,584 students enrolled
French [Auto]
Apprendre et maîtriser facilement les concepts de la librairie Redux et l'utiliser dans des projets React JS.
Maîtriser Redux sur Vanilla JavaScript et React JS.
Apprendre Redux avec des visuels simples et compréhensibles même pour les débutants.
Progresser, étape par étape, en apprenant les bases de Redux jusqu'à son utilisation avec la librairie React JS.
Apprendre à bien débogguer une application utilisant Redux
Comprendre et maîtriser les actions dans Redux et le payload
Comprendre le Reducer, combiner plusieurs reducers, le Store, les Actions, le Middleware, et bien plus encore!
Maîtriser la librairie React-Redux et son utilité dans vos applications React JS.
Le Store Provider, MapStateToPros et MapDispatchToPros n'auront plus de secrets pour toi !
Passer aux hooks nouveaux et maîtriser le Hook useSelector et le Hook useDispatch !
Travailler avec du code asynchrone, les requêtes HTTP via Thunk et Axios et les API
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 !!!)
Mise à jour de l'application BOOKS Google API avec REDUX TOOLKIT (Étape par étape)

Dans cette formation, je me lance le défi de t’expliquer Redux et Redux Toolkit de la manière la plus simple et la plus claire qui existe au MONDE!

Non seulement, je t’expliquerai la logique derrière ces deux versions avec des diagrammes, des graphiques, des visuels et du simple code Vanilla JavaScript, mais on ira encore plus loin en adaptant nos exercices à la librairie React.js afin de connecter nos applications React à la librairie Redux et Redux Toolkit.

  • Etape 1: je t’expliquerai les concepts de Redux d’une manière théorique

  • Etape 2: J’aborde tous les concepts, un par un, dans des petits exercices qui vont droit au but.

  • Etape 3: On appliquera tous ces concepts dans des petits exercices sur une vraie application React JS

  • Etape 4: Une fois que tu es à l’aise avec Redux, je te présenterai Redux Toolkit dans 33 nouvelles vidéos.

  • Etape 4: Une fois les concepts de Redux Toolkit étudiés, nous allons mettre à jour notre application React avec Redux vers la version Redux Toolkit.

Tu peux également télécharger les applications codées dans cette formations, les images, et les diagrammes dans la section “Ressources”.

Qu’allons-nous étudier exactement dans cette formation?

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.

  • 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 ».

  1. On verra comment dispatcher des actions pour créer un livre dans notre bibliothèque BOOKS.

  2. On verra comment dispatcher une autre action pour supprimer un livre bien spécifique ou effacer tous les livres existants.

  3. Ces actions dispatchées seront gérées via des reducers.

  4. 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 ».

  5. Pour pouvoir interroger l’API Google Books, nous allons devoir préciser le sujet du livre dans un moteur de recherche.

  6. Une fois la requête envoyée, on affiche un spinner pour indiquer à l’utilisateur qu’on est en train d’interroger l’API.

  7. Tout cela va être géré via le Reducer qui capte une action bien spécifique par rapport à ce cas.

  8. 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.

  9. En cliquant sur un élément dans cette liste, on va déployer une section pour accéder aux informations du livre sélectionné.

  10. On affichera un thumbnail de la couverture du livre, le titre du livre, l’auteur, et une petite description.

  11. 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.

  12. 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 😉

Donkey Geek.

PS: Je ferai de mon mieux pour répondre à vos questions ayant un lien direct au contenu de cette formation. En revanche, je ne suis pas habilité à intervenir sur vos projets personnels ou ceux sur lesquels vous travaillez en entreprise.

Remerciements

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
117 Ratings

Detailed Rating

Stars 5
82
Stars 4
27
Stars 3
8
Stars 2
0
Stars 1
0
8d7731197cdda39338284adfdd3e8ecf

Includes

14 hours on-demand video
20 articles
Certificate of Completion

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed