Développement d’une application monopage avec la librairie ReactJS et mise en place d’un système de centralisation des données et actions dans une application React pour gérer la logique et fonctionnalités de son application globalement.

1. Formation
Redux
Niveau Initiation
Une formation
Sandy LUDOSKY

2. Une formation
Cursus Redux

3. Une formation
Introduction
1. Présentation de 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éveloppeurs Front
● Intégrateurs web
● Chefs et facilitateurs de projet
Public concerné

5. Une formation
● Développeurs Front
● Intégrateurs web
● Chefs et facilitateurs de projet
Public concerné

6. Une formation
● Développeurs Front
● 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
Une formation
Sandy LUDOSKY

10. Une formation
Projet : gestionnaire de contacts

11. Une formation
Architecture Redux

12. Ressources et outils
Une formation
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. Une formation
Ressources & outils

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. Une formation
Sandy LUDOSKY
Redux Kezako ?

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 origines et
é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
● architecture Flux
● 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 principaux concepts 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
Organiser l'environnement
de travail

38. Une formation
Besoin
● node -v
● npm -v
● npm view react version

39. Découvrir les concepts clé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 le state
Un seul store : single source of truth
const store = createStore(reducer)

45. Une formation
Sandy LUDOSKY
Installer Redux

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éfinir les actions

49. Une formation
Définition
Les actions sont de simples objets JS qui
envoient des données de votre application
au store

50. Une formation
Définir les actions
store.dispatch()

51. Une formation
Définir les actions
Les actions sont définies sous forme de
constantes :

52. Une formation
Définir les actions
Les actions sont des objets JS avec :
● type
● payload

53. Une formation
Sandy LUDOSKY
Comprendre
les créateurs d'actions

54. Une formation
Sandy LUDOSKY
Découvrir la fonction
Reducer

55. Une formation
Définition
Dans Redux, l'état de l'application est
stocké comme un seul objet

56. Une formation
Sandy LUDOSKY
Comprendre le Store

57. Une formation
Définition
Le store est l’objet qui contient
l’état de l’application

58. Une formation
Actions
● getState()
● dispatch(action)
● subscribe(listener)

59. Une formation
Code source

60. Une formation
Sandy LUDOSKY
Comprendre
le Flux de données

61. Une formation
Le Flux de données

62. Une formation
Sandy LUDOSKY
Découvrir le projet
de démarrage

63. Une formation
Projet de démarrage
Fichiers téléchargeables 📁
Ressources

64. Préparer l’environnement
de travail
Une formation
Sandy LUDOSKY

65. Une formation
Outils et ressources
node –v
npm –v
npm view react version

66. Une formation
Sandy LUDOSKY
Installer les outils et
dépendances

67. Une formation
Installer les dépendances
npm install -g create-react-app
https://create-react-app.dev/docs/getting-started/

68. Démarrer avec Redux Toolkit
Une formation
Sandy LUDOSKY

69. Une formation
Redux Toolkit
Outils officiels et recommandés pour
assurer le développement facile et
efficace de l’architecture Redux

70. Installation

71. Une formation
API
configureStore()
createReducer()
createAction()
createSlice()

72. Une formation
Démo

73. Démarrer avec Redux Toolkit
Basic Demo
Une formation
Sandy LUDOSKY

74. Installation

75. Une formation
Exemple Counter
createAction()
createReducer()
configureStore()

76. Une formation
Démo

77. Installer la librairie
core Redux
Une formation
Sandy LUDOSKY

78. Une formation
Librairie Core Redux
Usage libre et plus flexible
Aucune méthode d’implémentation
imposée

79. Installation

80. Autres Libraries

81. Ajouter Redux devTools
Une formation
Sandy LUDOSKY

82. Une formation
Projet open-source/extension chrome
Historique des actions envoyées
Débogage des changements d’état
Redux Developer Tools

83. Chrome Web Store

84. Redux DevTools

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
Finaliser le projet React

88. Une formation
Sandy LUDOSKY
Définir et créer les actions

89. Une formation
Définir et créer
1. les actions
2. le reducer
3. et, le store

90. Introduction
Projet gestionnaire de contacts
Une formation
Sandy LUDOSKY

91. Gestionnaire de contacts

92. Une formation
1. Projet de 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. Une formation
Démo

94. Télécharger le projet
de démarrage
Une formation
Sandy LUDOSKY

95. Une formation
Fichiers téléchargeables 📁
Ressources
yarn install
Gestionnaire de contacts

96. Afficher la liste de contacts
Une formation
Sandy LUDOSKY

97. Liste de contacts

98. Une formation
Démo

99. Filtrer la liste de contacts
Une formation
Sandy LUDOSKY

100. Filtrer

101. Business contacts

102. Family contacts

103. Une formation
Démo

104. Editer et supprimer un contact
Fonctions
Une formation
Sandy LUDOSKY

105. Edit & remove

106. Remove

107. Une formation
Démo
edit & remove

108. Ajouter un nouveau contact
Une formation
Sandy LUDOSKY

109. Ajouter nouveau contact

110. Une formation
Démo

111. Valider le formulaire avec
JavaScript
Une formation
Sandy LUDOSKY

112. Validation Formulaire

113. Une formation
Démo

114. Introduction
Projet Gestion d’état d’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 et créer
Les actions
Le reducer
Le store

117. Une formation
Démo

118. Une formation
Sandy LUDOSKY
Comprendre les conteneurs
et composants

119. Une formation
Définition
Les liaisons React pour Redux séparent
les composants de conteneur et les
composants de présentation

120. Une formation
Rôle
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)
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éfinir des actions
Une formation
Sandy LUDOSKY

122. Type (constante)

123. Une formation
Simples objets JS qui envoient des
données de votre application au store
Les actions

124. Une formation
Type
Payload
Objet JS simple

125. Une formation
{
type: “ADD_TODO“
payload : {}
}
Définir & Créer des actions

126. addTodo

127. Une formation
store.dispatch(action)
Dispatch action

128. Une formation
store.dispatch(addTodo(args))
Dispatch addTodo

129. Une formation
Démo

130. Une formation
Sandy LUDOSKY
Utiliser connect(), mapStateToProps et
mapDispatchToProps

131. Une formation
Arguments de connect()
Prend 2 arguments
mapStateToProps
mapDispatchToProps

132. Une formation
mapStateToProps
Reçoit les données du store
Appelé à chaque changement de l’état du
store

133. Une formation
mapDispatchToProps
Dispatch les actions au store
état du store modifié suite au dispatch des
actions

134. Une formation
Sandy LUDOSKY
Persister les données en local
avec localstorage

135. Une formation
Pourquoi?
pour persister des données dans le
stockage du navigateur

136. Une formation
Ajouter dans localstorage
localStorage.setItem('monChat', 'Tom');

137. Une formation
Récupérer depuis localstorage
var cat = localStorage.getItem('myCat');

138. Une formation
Récupérer du localstorage
localStorage.removeItem('myCat');

139. Une formation
Efface le localstorage
localStorage.clear();

140. Gérer l’état avec la fonction
Reducer
Une formation
Sandy LUDOSKY

141. Une formation
Redux
L'état de l'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. La fonction reducer

145. Une formation
Démo

146. Une formation
Sandy LUDOSKY
Découvrir
les Redux Dev Tools

147. Une formation
Outil de développement
Historique des actions envoyées
Débogage des changements d’état

148. Chrome Web Store

149. Usage

150. Configurer le store
Une formation
Sandy LUDOSKY

151. Une formation
Le store
L’objet qui contient l’état de l’application

152. const store =
createStore(reducer,[initialState],[enhancer])
Configurer le store

153. Code source

154. Code source

155. Une formation
getState()
dispatch(action)
subscribe(listener)
l’API

156. Une formation
Démo

157. Dispatcher des actions
Une formation
Sandy LUDOSKY

158. Une formation
getState()
dispatch(action)
subscribe(listener)
l’API

159. Une formation
Configurer le store
import store from './store'

160. Une formation
Configurer le store
console.log('Initial state:
', store.getState())

161. Une formation
Configurer le store
const unsubscribe =
store.subscribe(() =>
console.log('State after dispatch:
', store.getState())
)

162. Une formation
Configurer le store
store.dispatch({ type:
'todos/todoAdded', payload: 'Learn
about actions' })
unsubscribe()

163. Une formation
Démo

164. Comprendre
le conteneur et le composant
Une formation
Sandy LUDOSKY

165. Une formation
Conteneur et Composant
Les liaisons React pour Redux séparent les
composants de conteneur et les
composants de présentation

166. Une formation
Composant de conteneur
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 de pré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. Une formation
Démo

169. Relier avec le HOC connect()
Une formation
Sandy LUDOSKY

170. Une formation
connect()
Composant d’ordre supérieur
2 arguments
mapStateToProps
mapDispatchToProps

171. Une formation
mapStateToProps
Reçoit les données du store
Appelé à chaque changement de l’état
du store

172. Une formation
mapDispatchToProps
Dispatch les actions au store
Etat du store modifié suite au dispatch
des actions

173. Une formation
Démo

174. Extraire des données avec
mapStateToProps
Une formation
Sandy LUDOSKY

175. mapStateToProps
Appelé chaque fois que 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 des données
export default connect(
mapStateToProps,
mapDispatchToProps)(TodoApp)

178. Une formation
Démo

179. Dispatcher des actions avec
mapDispatchToProps
Une formation
Sandy LUDOSKY

180. mapDispatchToProps
Permet de distribuer des 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. Une formation
Démo

183. Conclusion
Une formation
Sandy LUDOSKY

184. Une formation
Bilan
1. Démarrer avec 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. Une formation
Prochaine Formation