
contactez nous


Vous recherchez quelque chose qui vous aide à écrire des applications mobiles dans React Native qui se comportent de manière cohérente, s'exécutent dans différents environnements et se testent facilement ? Il existe une solution, et vous venez de la trouver !
Vous avez certainement remarqué que lorsque votre application devient plus grande et plus complexe, il est difficile de gérer les états et de transmettre des données d'un composant à un autre (ou à des composants enfants). C'est exactement là que redux peut vous aider : il donne un accès global à l'état ou aux données, qui peuvent être utilisées dans n'importe quel composant sans dépendre d'autres composants.
L'article est complet pour débutants et explique comment utiliser le redux et la boîte à outils redux dans une application React Native. Ce guide part du principe que vous connaissez les bases de React Native mais, si cela est également nouveau pour vous, nous avons ce qu'il vous faut avec notre Tutoriel React Native. Nous utilisons également un émulateur Android dans ce didacticiel, quelque chose qui vous permet de simuler un appareil Android sur votre ordinateur afin de pouvoir tester votre application sur une variété d'appareils et de niveaux d'API Android sans avoir besoin de chaque appareil physique. Notez que cet émulateur fournit presque toutes les fonctionnalités d'un véritable appareil Android.
Enfin, pour vous aider à apprendre les bases de Redux, nous vous proposons, en cours de route, des exemples de code d'une simple application de compteur. Cela ressemblera à ceci :
Voici le code de notre composant SimpleCounter :
À l'heure actuelle, ce code est statique et nous n'avons déclaré aucun état à l'intérieur du composant. N'hésitez pas à suivre les exemples de code au fur et à mesure que nous intégrons redux dans notre application React Native. Notre tutoriel React Native (lien ci-dessus) vous montrera comment configurer un environnement React Native, puis assurez-vous d'installer les bibliothèques redux et react-redux. Pour cela, utilisez simplement la commande :
Si vous utilisez npm 5.0.0 ou supérieur, tapez plutôt ceci :
Redux est une bibliothèque JavaScript conçue pour vous aider à gérer l'état de votre application. Pour ce faire, il fournit au développeur un endroit centralisé appelé magasin, où l'état est enregistré et modifié par le biais d'actions et de réducteurs. Cet emplacement centralisé vous permet de partager l'état entre plusieurs écrans et de savoir exactement où et comment l'état est modifié. Cela est particulièrement utile pour développer des applications trop volumineuses pour que les développeurs puissent avoir une connaissance complète des flux de données et, par conséquent, devenir sensibles aux bogues.
Comme indiqué ci-dessus, redux utilise une combinaison d'actions, de réducteurs et du magasin pour gérer l'état de l'application. Pour comprendre et apprendre Redux, vous devez savoir comment fonctionnent ces abstractions. Commençons !
Très légèrement, l'état de l'application est l'ensemble des informations que l'application utilise et/ou modifie. Le fait de disposer d'un état centralisé et d'une manière prévisible de le modifier peut permettre aux applications d'être cohérentes avec les informations qu'elles présentent aux utilisateurs. Cela est particulièrement utile pour les grandes applications d'une seule page.
Les actions et les réducteurs modifient ensemble l'état. Précisément, les actions déterminent ce qui est modifié et où. Les réducteurs indiquent comment il est modifié. En analysant la mise en page au début de l'article de blog, nous aurons besoin de trois actions : INCREMENT, DECREMENT et CHANGE_BY_AMOUNT. Les actions sont des objets dotés d'un type et d'un attribut de charge utile. Le type est l'identifiant de l'action et la charge utile est l'ensemble des informations dont le réducteur aura besoin pour modifier l'état. Les deux premières actions ne feront que diminuer ou incrémenter le montant du compteur de 1. Nous n'avons donc qu'à définir deux objets avec le type d'attribut, et le réducteur s'occupera du reste. La troisième action doit avoir une charge utile pour spécifier dans quelle mesure nous voulons incrémenter ou diminuer le compteur. Déclarez vos actions dans un fichier distinct appelé Actions :
Comme vous pouvez le constater, c'est assez simple. Ensuite, nous définissons l'état initial. Cela se fait dans un autre fichier avec le réducteur :
Nous avons défini l'état initial pour avoir un objet nommé counter avec le montant de l'attribut, en commençant à 0. Vous pouvez également voir que l'état initial est une constante et non une variable, ce qui semble n'avoir aucun sens, mais nous vous l'expliquerons plus tard. Ensuite, nous construisons le réducteur, qui est une fonction qui reçoit l'état actuel et l'action, sous forme d'arguments, pour produire le nouvel état de l'application. Le voici :
Il ne faut pas modifier l'état du réducteur. Pourquoi ? En fait, le réducteur ne doit pas modifier directement l'objet d'état. Au lieu de cela, il devrait créer un nouvel objet, qui sera le nouvel état. Le moteur de rendu de React compare l'objet d'état précédent avec l'objet d'état le plus récent.
Si vous modifiez directement l'état, React ne sait pas ce qui a changé et aura une idée erronée de l'état de l'application. Vous pouvez commencer à lire à ce sujet ici. C'est pourquoi, au début, nous avons déclaré l'état initial comme une constante et non comme une variable, car nous prétendons que l'objet d'état initial n'est jamais modifié.
L'étape suivante consiste à créer la boutique. Le magasin est l'objet dans lequel l'état est enregistré. Il est courant de créer le magasin et de l'exporter dans un fichier distinct. Vérifiez-le ci-dessous :
Nous créons le magasin à l'aide de la méthode createStore () de redux, qui reçoit en argument la fonction de réduction définie précédemment. Avec la boutique, nous pouvons invoquer des actions avec la méthode d'expédition (qui sera présentée plus loin dans ce guide) pour modifier l'état.
Nous rendons maintenant le magasin disponible en le transmettant au composant Provider qui englobe notre composant SimpleCounter. Le composant Provider permet d'accéder au magasin dans le composant SimpleCounter et à tous les composants qu'il contient.
Le composant Provider est importé depuis la bibliothèque react-redux, qui est la bibliothèque de liaison officielle pour react/react native et Redux.Découvrez ci-dessous comment procéder :
Ensuite, nous voulons connecter nos composants au magasin Redux. Nous pouvons le faire en utilisant la méthode connect de la bibliothèque react-redux dans notre fichier de composants SimpleCounter, comme suit :
Nous devons transmettre deux arguments à la méthode connect : le composant que nous voulons connecter (SimpleCounter) et une fonction qui mappe l'état de l'application à nos accessoires de composant.
Notez que nous n'avons accès à l'objet d'état que dans la fonction mapStateToProps car nous avons intégré le composant SimpleCounter au composant Provider.
La méthode connect fusionne l'objet renvoyé par MapStateToProps avec les accessoires du composant SimpleCounter pour accéder à la valeur state.counter.amount via this.props.amount.
La méthode d'expédition est également disponible via les accessoires, et nous pouvons désormais importer nos actions et les envoyer dans le composant SimpleCounter. Voici le code mis à jour du composant SimpleCounter :
Nous avons maintenant un magasin centralisé dans lequel l'état est enregistré et modifié de manière prévisible grâce à des actions et à des réducteurs, mais vous avez peut-être remarqué que la valeur du compteur revient à zéro chaque fois que vous actualisez ou quittez l'application, car pour le moment, l'état n'est pas conservé et chaque fois que vous ouvrez l'application, le réducteur définit la valeur du compteur comme étant zéro (l'état initial).
La persistance de l'état est importante si vous devez conserver certaines informations même lorsque l'utilisateur ferme l'application, comme les jetons de connexion ou certains paramètres de configuration. Vous pouvez obtenir la persistance de l'état dans une application React Native à l'aide de la bibliothèque redux-persist.
Redux persist enregistre le magasin Redux dans un stockage persistant local et le récupère chaque fois que l'application est rouverte ou actualisée. Nous utilisons un émulateur Android, mais redux-persist fonctionne également avec IOS. Commençons par installer redux persist :
Ensuite, modifiez le fichier Store.js comme suit :
Importez d'abord les méthodes PersistStore et PersistReducer depuis la bibliothèque redux-persist. Transmettez le réducteur à la méthode PersistReducer à côté de l'objet PersistConfig pour créer un PersistedReducer.
Dans l'objet PersistConfig, déclarez que vous allez utiliser AsyncStorage pour conserver le magasin redux, qui est un stockage clé-valeur non chiffré de React Native.
Enfin, appelez la méthode PersistStore pour vous assurer que notre boutique est conservée. Si vous avez un projet plus important, vous n'aurez peut-être pas besoin de conserver l'état complet. Dans ce cas, vous pouvez utiliser les méthodologies « Liste blanche » et « Liste noire » dans l'objet PersistConfig pour choisir les réducteurs que vous souhaitez conserver, cliquez sur ici si tu veux en savoir plus.
Enfin, dans le fichier App.js, importez le PersistedStore depuis Store.js et associez le SimpleCounter au composant PersistGate pour vous assurer que l'interface utilisateur de l'application n'est pas affichée tant que l'état persistant n'est pas récupéré et enregistré dans le magasin redux.
Nous devons mentionner la boîte à outils Redux, une bibliothèque écrite par les développeurs de Redux pour aider à créer une logique de réduction plus efficace. L'utilisation des fonctions de cette bibliothèque rendra votre code plus compact et plus simple à lire. Voici une introduction à certaines de ces fonctions :
La boîte à outils Redux nous a présenté une nouvelle façon de créer une action. Cela fonctionne comme suit :
La méthode CreateAction reçoit le type d'action comme argument et renvoie une fonction de création d'action. Nous pouvons ensuite appeler cette fonction et transmettre la charge utile en argument pour créer l'objet d'action. Vous pouvez également accéder au type d'action avec la méthode toString (), comme IncrementAction.toString (). Grâce à cette méthode, nous n'avons plus besoin de déclarer les types d'actions en tant que constantes, ce qui réduit considérablement le code standard.
Il s'agit d'une autre méthode de la boîte à outils redux qui vise à simplifier notre code. La méthode nous permet d'écrire des réducteurs avec la notation de la table de recherche, ce qui nous permet d'écrire un code beaucoup plus propre. Les objets renvoyés par la méthode createAction () peuvent être utilisés directement comme clés de table. En suivant la logique du réducteur précédente, nous avons :
De plus, createReducer () utilise également Immer pour écrire des réducteurs avec une logique de mutation plus simple. Immer traduit toutes les opérations de mutation en opérations de copie équivalentes. Alors maintenant, nous pouvons écrire notre réducteur comme ceci :
C'est beaucoup plus simple, tu ne trouves pas ?
La fonction configureStore () entoure la méthode createStore () et crée le magasin en configurant certaines configurations standard. De plus, la méthode reçoit un objet de configuration au lieu d'un groupe de fonctions. Ainsi, lorsque vous l'utilisez, vous devez transmettre le réducteur dans un objet associé à l'attribut du réducteur. Comme ça :
La configuration de la boutique est une question que nous n'avons pas abordée dans cet article de blog, mais nous avons estimé qu'il était tout de même important de la mentionner. Si vous le souhaitez, n'hésitez pas à l'explorer vous-même. Une dernière chose, si vous souhaitez intégrer redux-persist et redux-toolkit dans le même projet, vous avez peut-être rencontré l'erreur « Une valeur non sérialisable a été détectée dans une action ». Cela est dû au fait que configureStore () de redux-toolkit intègre une vérification sérialisable des actions et redux-persist doit y transmettre une fonction. Une façon de résoudre ce problème consiste à importer GetDefaultMiddleware depuis redux-toolkit et à désactiver la vérification sérialisable sur les types d'actions redux-persist. Comme ça :
Vous trouverez la discussion et la solution à ce problème dans ce forum.
Ça y est. Le résultat devrait être une application de comptage simple mais fonctionnelle. Nous espérons que vous avez appris comment les abstractions de redux fonctionnent ensemble et que vous vous êtes familiarisé avec les flux de données qu'elles créent. Il vous sera donc plus facile de commencer à appliquer Redux à votre application. De plus, redux est une bibliothèque indépendante, donc la logique que vous avez apprise ici serait la même si vous vouliez intégrer redux dans une application Web utilisant React. Je vous souhaite bonne chance en matière de programmation !
Étudiant en informatique et à temps partiel d'ImaginaryCloud. Désireux d'apprendre de nouvelles technologies et techniques. Joueur de tennis et pianiste.
People who read this post, also found these interesting: