gestion d’état et flux de données par Nicolas Fontaine

1. Backelite – Digital Service Design by Capgemini
React Native
Part 2 : Introduction à Redux
1

2. Backelite – Digital Service Design by Capgemini
Votre intervenants
Nicolas Fontaine
Backelite
iOS & Web developer
2

3. Backelite – Digital Service Design by Capgemini
Sommaire
1. Rappel + Qu’est-ce que redux
2. Principes
3. React + Redux
A. Store et Reducer
B. Connect
C. Action creators
D. Middlewares
4. Démo
5. Standing ovation spontanée du public
3

4. Backelite – Digital Service Design by Capgemini
Rappel
4
React Native permet de développer des
applications natives (iOS, Android…) en
javascript.
On utilise des “components” imbriqués pour
créer notre interface graphique. (Arbre)
On contrôle facilement l’affichage via JS (if,
else, for, map…)
On stylise le tout avec une syntaxe dérivée
du CSS.
On peut utiliser de nombreuses librairies JS
(ex : faire un appel WS)
Il est originaire de Facebook.

5. Backelite – Digital Service Design by Capgemini
Qu’est-ce que Redux ?
5
C’est très simple de créer une petite application de
2-3 écrans…
Mais comment gérer des évènements, la
navigation et des flux de données au travers d’une
application complète.

6. Backelite – Digital Service Design by Capgemini
Qu’est-ce que Redux ?
6
La réponse : Redux
Un conteneur d’état (state), qui permet une grande
homogénéité dans la gestion des flux.
Redux n’est pas restreint à react native

7. Principes
7

8. Backelite – Digital Service Design by Capgemini
Principes
8
Que votre application soit simple ou complexe, la
totalité des états de votre applications seront
représenté comme un unique objet Javascript.
(dénomination : state ou state tree)
1

9. Backelite – Digital Service Design by Capgemini
Principes
9
Le state tree est redondant, pour le changer :
ancien state + Action = nouveau state
Action = type de l’action + data
2

10. Backelite – Digital Service Design by Capgemini
Principes
10
Le reducer
Une fonction qui a pour but de répondre aux
actions et renvoyer un nouveau state tree par la
suite.
Attention aux fonctions “impures”
3

11. Backelite – Digital Service Design by Capgemini
Principes
11
Le store
C’est lui qui va permettre de dispatcher des actions
vers le reducer et récupérer le state tree.
Méthodes : getState / dispatch / subscribe
4

12. Backelite – Digital Service Design by Capgemini
Principes
12
VIEW
Reducer
Actions
State tree

13. React + Redux
13

14. Backelite – Digital Service Design by Capgemini
React + Redux
14
Ex d’implémentation : (le store)

15. Backelite – Digital Service Design by Capgemini
React + Redux
15
Ex d’implémentation : (reducer)

16. Backelite – Digital Service Design by Capgemini
React + Redux
16
Ex d’implémentation : (combiner des reducer)

17. Backelite – Digital Service Design by Capgemini
React + Redux
17
C’est bien beau tout ça mais comment faire ces
fameux dispatch ou recevoir le nouveau state tree
depuis un component ?

18. CONNECT
18

19. Backelite – Digital Service Design by Capgemini
Connect
19
Un fonction qui va vous permettre d’encapsuler votre “component” afin
que les propriétés de ce dernier (props) soient mises à jour dès que le
state change !

20. Backelite – Digital Service Design by Capgemini
Connect
20
Et donc ?
● Nouvelles props = render
● Plus besoin d’un state local à chaque component
● Homogénéité des informations aux travers de l’application.
(pour peu que votre store soit bien pensé)

21. Backelite – Digital Service Design by Capgemini
Connect
21
Connect ajoute la fonction dispatch au props de votre component.
Ce component devient donc capable d’envoyer des actions !

22. Action Creators
22

23. Backelite – Digital Service Design by Capgemini
Action Creators
23
Donc… on fait tous les traitements dans nos
components et on envois les résultats avec
dispatch ? C’est pas joli joli...
Ca marcherait mais… non

24. Backelite – Digital Service Design by Capgemini
Action Creators
24
Exemple :

25. Backelite – Digital Service Design by Capgemini
Action Creators
25
VIEW
Reducer
Actions
State tree
Action
creators

26. Middlewares
26

27. Backelite – Digital Service Design by Capgemini
Middlewares
27
VIEW
Reducer
Actions
State tree
Action
creators
Middlewares
Altered
Actions

28. Backelite – Digital Service Design by Capgemini
Démonstration
28
https://github.com/Heidan34/react-native-cocoaheads

29. Questions ?
29

30. On continue avec React Native ?
Quels sujets vous intéressent ?
● Redux
● Déployez vos applications React.Native (de expo à xcode / android studio)
● Créer un composant React.Native avec du code natif.
● Ajouter du React.Native dans une application existante
● Architecturer un projet React.Native
30