Download as PDF, PPTX
![Usage
const store = createStore(
reducer,
/*preloadedState*/,
[enhancer]
)](https://image.slidesharecdn.com/alphorm-210222083831/85/Alphorm-com-Formation-Redux-Niveau-Initiation-85-320.jpg)
![const store =
createStore(reducer,[initialState],[enhancer])
Configurer le store](https://image.slidesharecdn.com/alphorm-210222083831/85/Alphorm-com-Formation-Redux-Niveau-Initiation-152-320.jpg)
Uploaded byAlphorm
Alphorm.com Formation Redux : Niveau Initiation
La formation sur Redux, animée par Sandy Ludosky, est destinée aux développeurs front-end, intégrateurs web et chefs de projet, visant à enseigner l'intégration de Redux dans des applications React, avec un projet concret de gestion de contacts. Le cursus couvre des concepts essentiels tels que les actions, le store et les reducers, ainsi que l'utilisation de Redux Toolkit pour simplifier le développement. Des outils tels que Visual Studio Code, Node.js, et les Redux Developer Tools sont recommandés pour suivre la formation.
More Related Content
Similar to Alphorm.com Formation Redux : Niveau Initiation
Alphorm.com Formation Redux : Niveau Initiation
- 1.
- 2.
- 3. Une formation Introduction 1. Présentationde la formation 2. Démarrer avec Redux 3. Application monopage en ReactJS : projet: Gestionnaire de contacts 1. Ajouter Redux à son application 2. Connecter Redux aux composants React Conclusion Plan de la formation
- 4. Une formation ● DéveloppeursFront ● Intégrateurs web ● Chefs et facilitateurs de projet Public concerné
- 5. Une formation ● DéveloppeursFront ● Intégrateurs web ● Chefs et facilitateurs de projet Public concerné
- 6. Une formation ● DéveloppeursFront ● Intégrateurs web ● Chefs et facilitateurs de projet Public concerné
- 7. Une formation Connaissances requises ●HTML & CSS ● Expérience avec Bootstrap 4 ● Notions de javascript ● Librairies JS Front (React, Angular, Vue ...)
- 9. Présentation du projet Uneformation Sandy LUDOSKY
- 10. Une formation Projet :gestionnaire de contacts
- 11.
- 12. Ressources et outils Uneformation Sandy LUDOSKY
- 13. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 14. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 15. Une formation Ressources &outils ● Visual Studio Code
- 16. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 17. Une formation Ressources &outils ● Node.js & Npm
- 18. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 19.
- 20. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 21. Une formation Ressources &outils ● Visual Studio Code ● Node.js & Npm ● React 16+ / React CLI ● React Developer Tools ● Redux Developer Tools
- 22. Une formation Ressources &outils ● les ressources ● les fichiers téléchargeables 📁 ● les outils ⚙
- 23. Une formation Ressources &outils ● les ressources ● les fichiers téléchargeables 📁 ● les outils ⚙
- 24.
- 25. Une formation Redux Kezako? ● Librairie JS open-source ● Gestion d’état centralisée ● Un conteneur d’état prévisible pour les application JS
- 26. Une formation ● Centralisée: une seule source de vérité ● Flexible ● Facilement débogable ● Facile à tester et prévisible Redux Kezako ?
- 27. Une formation Dan Abramov& Andrew Clark Ses créateurs
- 28. Une formation Dan Abramov& Andrew Clark Ses créateurs
- 29. Découvrir les origineset évolutions de Redux Une formation Sandy LUDOSKY
- 30. Une formation En bref ●Bibliothèque javascript open-source ● première version : 2 juin 2015 ● Ses créateurs : Dan Abramov & Andrew Clark
- 31. Une formation Inspirations ● architectureFlux ● programmation fonctionnelle : langage ELM
- 32. Une formation Quelques chiffres ●dépot github : > 53k ✦ ● npm react-redux : > 4.6 téléchargements ● npm react-redux : > 3.5 téléchargements
- 33. Découvrir les principauxconcepts et avantages d’ajouter Redux à son application Une formation Sandy LUDOSKY
- 34. Une formation Avantages Redux ●Centralisée : une seule source de vérité ● Flexible et prévisible ● Facile à déboguer et à tester
- 35. Une formation Avantages Redux ●Excellent outil de développement ● Structure commune et modulaire ● Non exclusif
- 36. Une formation Avantages Redux ●Les recommandations de son créateur : Dan Abramov source = https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
- 37. Une formation Sandy LUDOSKY Organiserl'environnement de travail
- 38. Une formation Besoin ● node-v ● npm -v ● npm view react version
- 39. Découvrir les conceptsclés Une formation Sandy LUDOSKY
- 40. Une formation Présentation &concepts clés Gestion état & cycle de vie Créateurs d’actions Function reducer Store
- 41. Gestion état &cycle de vie Global, centralisé & partagé Flux de données unidirectionnelle Actions Etat View
- 42. Une formation Créateurs d’actions Objet(type, payload) Distribue action const ACTION = “ACTION”
- 43. Une formation Fonction reducer (state,action) => newState Reçoit les actions Renvoie le state
- 44. Une formation Store Contient lestate Un seul store : single source of truth const store = createStore(reducer)
- 45.
- 46. Une formation Installer Redux ●https://redux.js.org/introduction/installation
- 47. Une formation Installer Redux ●https://redux.js.org/introduction/installation
- 48. Une formation Sandy LUDOSKY Définirles actions
- 49. Une formation Définition Les actionssont de simples objets JS qui envoient des données de votre application au store
- 50. Une formation Définir lesactions store.dispatch()
- 51. Une formation Définir lesactions Les actions sont définies sous forme de constantes :
- 52. Une formation Définir lesactions Les actions sont des objets JS avec : ● type ● payload
- 53. Une formation Sandy LUDOSKY Comprendre lescréateurs d'actions
- 54. Une formation Sandy LUDOSKY Découvrirla fonction Reducer
- 55. Une formation Définition Dans Redux,l'état de l'application est stocké comme un seul objet
- 56.
- 57. Une formation Définition Le storeest l’objet qui contient l’état de l’application
- 58. Une formation Actions ● getState() ●dispatch(action) ● subscribe(listener)
- 59.
- 60. Une formation Sandy LUDOSKY Comprendre leFlux de données
- 61. Une formation Le Fluxde données
- 62. Une formation Sandy LUDOSKY Découvrirle projet de démarrage
- 63. Une formation Projet dedémarrage Fichiers téléchargeables 📁 Ressources
- 64. Préparer l’environnement de travail Uneformation Sandy LUDOSKY
- 65. Une formation Outils etressources node –v npm –v npm view react version
- 66. Une formation Sandy LUDOSKY Installerles outils et dépendances
- 67. Une formation Installer lesdépendances npm install -g create-react-app https://create-react-app.dev/docs/getting-started/
- 68. Démarrer avec ReduxToolkit Une formation Sandy LUDOSKY
- 69. Une formation Redux Toolkit Outilsofficiels et recommandés pour assurer le développement facile et efficace de l’architecture Redux
- 70.
- 71.
- 72.
- 73. Démarrer avec ReduxToolkit Basic Demo Une formation Sandy LUDOSKY
- 74.
- 75.
- 76.
- 77. Installer la librairie coreRedux Une formation Sandy LUDOSKY
- 78. Une formation Librairie CoreRedux Usage libre et plus flexible Aucune méthode d’implémentation imposée
- 79.
- 80.
- 81. Ajouter Redux devTools Uneformation Sandy LUDOSKY
- 82. Une formation Projet open-source/extensionchrome Historique des actions envoyées Débogage des changements d’état Redux Developer Tools
- 83.
- 84.
- 85. Usage const store =createStore( reducer, /*preloadedState*/, [enhancer] )
- 86. Usage const store =createStore( reducer, /*preloadedState*/, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )
- 87. Une formation Sandy LUDOSKY Finaliserle projet React
- 88. Une formation Sandy LUDOSKY Définiret créer les actions
- 89. Une formation Définir etcréer 1. les actions 2. le reducer 3. et, le store
- 90. Introduction Projet gestionnaire decontacts Une formation Sandy LUDOSKY
- 91.
- 92. Une formation 1. Projetde démarrage & installation 2. Afficher liste de contact 3. Filtrer la liste de contact 4. Editer/supprimer contact (fonctions) 5. Ajouter nouveau contact Plan
- 93.
- 94. Télécharger le projet dedémarrage Une formation Sandy LUDOSKY
- 95. Une formation Fichiers téléchargeables📁 Ressources yarn install Gestionnaire de contacts
- 96. Afficher la listede contacts Une formation Sandy LUDOSKY
- 97.
- 98.
- 99. Filtrer la listede contacts Une formation Sandy LUDOSKY
- 100.
- 101.
- 102.
- 103.
- 104. Editer et supprimerun contact Fonctions Une formation Sandy LUDOSKY
- 105.
- 106.
- 107.
- 108. Ajouter un nouveaucontact Une formation Sandy LUDOSKY
- 109.
- 110.
- 111. Valider le formulaireavec JavaScript Une formation Sandy LUDOSKY
- 112.
- 113.
- 114. Introduction Projet Gestion d’étatd’application Une formation Sandy LUDOSKY
- 115. Une formation Fichiers téléchargeables📁 Ressources yarn install Gestion d’état avec Redux
- 116. Une formation Définir etcréer Les actions Le reducer Le store
- 117.
- 118. Une formation Sandy LUDOSKY Comprendreles conteneurs et composants
- 119. Une formation Définition Les liaisonsReact pour Redux séparent les composants de conteneur et les composants de présentation
- 120. Une formation Rôle Récupère lesdonnées et met à jour de l’état du composant détient la logique dispatch les actions reçoit les données (props) décrit l’aspect du composant lit les données (props) appelle les fonctions de rappel présente le visuel (html ...)
- 121. Créer et définirdes actions Une formation Sandy LUDOSKY
- 122.
- 123. Une formation Simples objetsJS qui envoient des données de votre application au store Les actions
- 124.
- 125. Une formation { type: “ADD_TODO“ payload: {} } Définir & Créer des actions
- 126.
- 127.
- 128.
- 129.
- 130. Une formation Sandy LUDOSKY Utiliserconnect(), mapStateToProps et mapDispatchToProps
- 131. Une formation Arguments deconnect() Prend 2 arguments mapStateToProps mapDispatchToProps
- 132. Une formation mapStateToProps Reçoit lesdonnées du store Appelé à chaque changement de l’état du store
- 133. Une formation mapDispatchToProps Dispatch lesactions au store état du store modifié suite au dispatch des actions
- 134. Une formation Sandy LUDOSKY Persisterles données en local avec localstorage
- 135. Une formation Pourquoi? pour persisterdes données dans le stockage du navigateur
- 136. Une formation Ajouter danslocalstorage localStorage.setItem('monChat', 'Tom');
- 137. Une formation Récupérer depuislocalstorage var cat = localStorage.getItem('myCat');
- 138. Une formation Récupérer dulocalstorage localStorage.removeItem('myCat');
- 139. Une formation Efface lelocalstorage localStorage.clear();
- 140. Gérer l’état avecla fonction Reducer Une formation Sandy LUDOSKY
- 141. Une formation Redux L'état del'application est stocké comme un seul objet
- 142. Une formation function reducer(state,action) { switch(action.type) { case “TYPE” : return {} } } La fonction reducer
- 143. Une formation function reducer(state= initialState, action) { switch(action.type) { case “TYPE” : return {} } } La fonction reducer
- 144.
- 145.
- 146. Une formation Sandy LUDOSKY Découvrir lesRedux Dev Tools
- 147. Une formation Outil dedéveloppement Historique des actions envoyées Débogage des changements d’état
- 148.
- 149.
- 150. Configurer le store Uneformation Sandy LUDOSKY
- 151. Une formation Le store L’objetqui contient l’état de l’application
- 152.
- 153.
- 154.
- 155.
- 156.
- 157. Dispatcher des actions Uneformation Sandy LUDOSKY
- 158.
- 159. Une formation Configurer lestore import store from './store'
- 160. Une formation Configurer lestore console.log('Initial state: ', store.getState())
- 161. Une formation Configurer lestore const unsubscribe = store.subscribe(() => console.log('State after dispatch: ', store.getState()) )
- 162. Une formation Configurer lestore store.dispatch({ type: 'todos/todoAdded', payload: 'Learn about actions' }) unsubscribe()
- 163.
- 164. Comprendre le conteneur etle composant Une formation Sandy LUDOSKY
- 165. Une formation Conteneur etComposant Les liaisons React pour Redux séparent les composants de conteneur et les composants de présentation
- 166. Une formation Composant deconteneur Récupère les données et met à jour de l’état du composant Détient la logique Dispatch les actions Reçoit les données (props)
- 167. Une formation Composant deprésentation Décrit l’aspect du composant Reçoit les props du store Reçoit les intéractions de l’utilisateur Lit les données (props) Appelle les fonctions de rappel Présente le visuel (html ...)
- 168.
- 169. Relier avec leHOC connect() Une formation Sandy LUDOSKY
- 170. Une formation connect() Composant d’ordresupérieur 2 arguments mapStateToProps mapDispatchToProps
- 171. Une formation mapStateToProps Reçoit lesdonnées du store Appelé à chaque changement de l’état du store
- 172. Une formation mapDispatchToProps Dispatch lesactions au store Etat du store modifié suite au dispatch des actions
- 173.
- 174. Extraire des donnéesavec mapStateToProps Une formation Sandy LUDOSKY
- 175. mapStateToProps Appelé chaque foisque le state change Reçoit l'intégralité de l'état du store et renvoie un objet de données dont le composant a besoin
- 176. Une formation connect() =composant ordre supérieur Relie le composant avec le store 2 paramètres mapStateToProps() mapDispatchToProps()
- 177. Une formation Extraction desdonnées export default connect( mapStateToProps, mapDispatchToProps)(TodoApp)
- 178.
- 179. Dispatcher des actionsavec mapDispatchToProps Une formation Sandy LUDOSKY
- 180. mapDispatchToProps Permet de distribuerdes fonctions aux composants Appelé pour dispatch des actions au store export default connect( mapStateToProps, mapDispatchToProps)(TodoApp)
- 181. Une formation connect() =composant order supérieur Relie le composant avec le store 2 paramètres mapStateToProps() mapDispatchToProps()
- 182.
- 183.
- 184. Une formation Bilan 1. Démarreravec Redux 2. La référence API : les fondamentaux 3. Installation & Usage 4. Projet React : gestionnaire de contacts 5. Projet React : gestion état application avec Redux
- 185.