Téléchargé 12 fois
Téléchargé parIdean France
Cocoheads react native + redux par Nicolas Fontaine
Ce document présente une introduction à Redux dans le cadre du développement d'applications React Native. Il explique les principes fondamentaux de Redux, tels que la gestion des états application avec un store unique, l'utilisation des reducers et des actions, ainsi que l'intégration de Redux dans des composants React via la fonction connect. Enfin, une démonstration est proposée, suivie de questions sur divers sujets liés à React Native.
Cocoheads react native + redux par Nicolas Fontaine
- 1. Backelite – DigitalService Design by Capgemini React Native Part 2 : Introduction à Redux 1
- 2. Backelite – DigitalService Design by Capgemini Votre intervenants Nicolas Fontaine Backelite iOS & Web developer 2
- 3. Backelite – DigitalService 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 – DigitalService 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 – DigitalService 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 – DigitalService 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.
- 8. Backelite – DigitalService 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 – DigitalService 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 – DigitalService 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 – DigitalService 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 – DigitalService Design by Capgemini Principes 12 VIEW Reducer Actions State tree
- 13.
- 14. Backelite – DigitalService Design by Capgemini React + Redux 14 Ex d’implémentation : (le store)
- 15. Backelite – DigitalService Design by Capgemini React + Redux 15 Ex d’implémentation : (reducer)
- 16. Backelite – DigitalService Design by Capgemini React + Redux 16 Ex d’implémentation : (combiner des reducer)
- 17. Backelite – DigitalService 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.
- 19. Backelite – DigitalService 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 – DigitalService 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 – DigitalService 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.
- 23. Backelite – DigitalService 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 – DigitalService Design by Capgemini Action Creators 24 Exemple :
- 25. Backelite – DigitalService Design by Capgemini Action Creators 25 VIEW Reducer Actions State tree Action creators
- 26.
- 27. Backelite – DigitalService Design by Capgemini Middlewares 27 VIEW Reducer Actions State tree Action creators Middlewares Altered Actions
- 28. Backelite – DigitalService Design by Capgemini Démonstration 28 https://github.com/Heidan34/react-native-cocoaheads
- 29.
- 30. On continue avecReact 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