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

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.