À propos de l'auteur

Fortune Ikechi est un ingénieur frontal basé dans l'État de Rivers au Nigeria. Il est étudiant à l'Université de Port-Harcourt. Il est passionné par la communauté et…
En savoir plus sur
Fortune
…

La gestion des états fait partie intégrante du développement d'applications JavaScript, en particulier les applications React et React Native. Dans ce tutoriel, nous allons apprendre à utiliser la bibliothèque MobX pour la gestion des états; comprendre les concepts de base, certains cas d'utilisation et créer un exemple simple.

Remarque: Une connaissance de base de Javascript et de React Native vous sera très utile au cours de ce didacticiel.

Utilisation de MobX dans les applications React [19659003] L'état correspond aux données avec lesquelles votre ou vos composants travaillent – il contient les données dont un composant a besoin et il dicte le rendu d'un composant. La gestion de l'état est le processus de gestion de la manière dont l'état est mis à jour et transmis d'un composant à un autre. La surveillance et l'utilisation des données dans une application peuvent être difficiles et c'est le besoin de bibliothèques de gestion d'état. La gestion de toutes les données de votre application peut être un peu intimidante, en particulier lorsque votre application augmente en taille et en complexité, la création de votre propre outil de gestion d'état n'est pas seulement fastidieuse mais difficile.C'est pourquoi vous voudrez peut-être utiliser une bibliothèque de gestion d'état.

Cependant, il est important de savoir que l'état n'est pas la seule donnée qu'un composant restitue, les composants peuvent également rendre des accessoires qui lui sont transmis.

Options for State Management

Bibliothèques de gestion d'état pour les applications React Native comprendre; React Context API Redux MobX et Unstated Next .

Bien que ces gestionnaires d'État aient chacun leurs avantages et leurs inconvénients, je recommande personnellement MobX en raison de ses simplicité, code standard minimal – il ne nécessite pas de changement de code, c'est parce que dans son noyau, MobX est et ressemble à JavaScript; vous n'avez pas besoin d'un changement d'architecture pour le supporter (contrairement à Redux et dans une moindre mesure Context).

En fait, c'est une abstraction tellement invisible que dans de nombreux cas, si vous supprimez tout le code MobX – le @observable @computed @action et observer décorateurs, votre code fonctionnera exactement de la même manière (même s'il aura quelques problèmes de performances ) et ce n'est pas limité à un état global. Voici quelques raisons d'aller de l'avant avec MobX en tant que gestionnaire d'état de choix pour vos applications React Native.

Bien qu'il soit également important de noter certains problèmes liés à l'utilisation de MobX en tant que gestionnaire d'état, dont certains incluent le fait d'éviter les règles sur la façon dont pour l'implémenter et MobX peut être difficile à déboguer surtout lorsque vous changez d'état directement dans un composant sans utiliser le paramètre @actions .

Qu'est-ce que MobX?

D'après la documentation officielle MobX est une bibliothèque testée au combat qui rend la gestion d'état simple et évolutive en appliquant de manière transparente une programmation réactive fonctionnelle. MobX traite votre application comme une feuille de calcul. La logique est que Tout ce qui peut être dérivé de l'état de l'application doit être fait automatiquement .

Principes fondamentaux et concept de MobX

MobX se différencie des autres gestionnaires d'État par les concepts suivants.

1. État

L'état correspond aux données que contient votre application – c'est à peu près tout le contenu de sa mémoire. Ceci s'applique également à vos composants.

2. Dérivations

Dans MobX, tout ce qui peut être dérivé de l'état sans interactions est une dérivation. Des exemples de dérivations incluent:

• Interface utilisateur,
• Add-ons backend tels que les modifications apportées à un serveur.

MobX a deux types principaux de dérivations:

• Valeurs calculées
  Les valeurs calculées sont principalement des valeurs qui peuvent être dérivées d'un état actuel à l'aide de fonctions pures.
• Réactions
  Les réactions dans les dérivations sont des effets secondaires qui se produisent à la suite de changements dans l'état de votre application. Ils sont similaires à une valeur calculée, mais au lieu de produire une nouvelle valeur, une réaction produit un effet secondaire pour des choses comme l'impression sur la console, les requêtes réseau, la mise à jour incrémentielle de l'arborescence des composants React pour patcher le DOM, et ainsi de suite. [19659028] Une règle d'or lors de l'utilisation de MobX est que lors de la création d'une valeur basée sur l'état actuel, utilisez une valeur calculée.

  3. Actions

  Contrairement aux dérivations, les actions sont du code qui modifie l'état d'une application – un code qui change l'état. Ce sont tout ce qui modifie l'état. Avec MobX, vous pouvez le rendre explicite dans votre code, les actions sont principalement des événements utilisateur tels que des entrées, des poussées de données backend ou même des événements planifiés.

  Pour mieux comprendre les actions, regardons un exemple de la documentation MobX .

   Class Ticker {
      @ tick observable = 0
  
      @action
      incrément () {
          this.tick ++ // 'this' sera toujours correct
      }
  }
  
  Const ticker = nouveau Ticker ()
  setInterval (ticker.increment, 1000) 

  Ici, nous définissons un tick @observable avec une valeur initiale de 0. Ensuite, nous avons créé un incrément de fonction qui est également une action qui met à jour la valeur initiale une fois

  Observables dans MobX

  Les observables ou valeurs observables dans MobX sont principalement des primitives JavaScript, des objets simples, des classes, des tableaux et des cartes. Ils sont principalement utilisés en déclarant d'abord une observable et en lui ajoutant une valeur, puis en l'appelant en ajoutant un @observable comme indiqué ci-dessous:

   observable (value)
   @observable classProperty = value 

  Approche de l'architecture de magasin dans MobX

  L'architecture principale de MobX comprend des éléments et des idées tels que les services, le magasin, les modèles de vue et les conteneurs – dont certains sont expliqués ci-dessous.

  • Service
    ] Il s'agit généralement d'une fonction appelée depuis un conteneur; ils peuvent être utilisés pour obtenir des données des API et être ajoutés au magasin.
  • Store
    Comme son nom l'indique, c'est le lieu central de l'état utilisé par une application. Habituellement dans MobX, ceux-ci incluent les observables, les variables, les actions et les propriétés calculées.
  • Container
    Cela appelle le service et place les données de View Model vers View Component as React props (doit être marqué avec @observer décorateur).

  MobX In React And Native Applications

  À des fins d'apprentissage, dans ce didacticiel, nous allons créer une application de liste simple qui va autoriser un utilisateur à ajouter, afficher et supprimer des éléments de liste. Nous utiliserons MobX en tant que gestionnaire d'état dans cette application pour ajouter des listes, les mettre à jour et les supprimer de l'état de l'application. Cependant, il est important de noter que vous comprenez déjà les concepts de base de JavaScript et React.

  Sans plus tarder, commençons!

  Configuration de votre environnement

  Maintenant que nous savons ce qu'est MobX et comment il fonctionne , laissez-moi vous expliquer comment configurer votre projet.

  Commençons par créer un projet avec ce qui suit, écrivez le code suivant sur votre terminal pour initialiser un projet:

   npx create-react-app listapp 

  Le le code ci-dessus créera une application React nue en utilisant le package create-react-app . Déplacez-vous dans le répertoire du projet:

   cd listapp 

  Pour cette application, nous aurons besoin de trois composants:

  • TitleInput
    Il contiendra le titre de notre projet et un formulaire de saisie pour ajouter des listes.
  • Liste
    Ce sera un formulaire de saisie qui permettrait à un utilisateur d'ajouter une liste. Il aura un bouton d'ajout pour ajouter nos éléments de liste.
  • ListsDisplay
    Ce composant affichera tous les éléments de la liste des utilisateurs ainsi qu'un bouton de suppression qui est automatiquement généré lorsqu'un utilisateur ajoute un élément de liste. [19659028] Nous utiliserons un Store.js pour contenir l'état de l'application et des méthodes pour le modifier de la même manière que Redux. Décrivons à quoi ils serviront.
    • mobx
      Voici le gestionnaire d'état que nous utiliserons pour ce projet.
    • mobx-react
      Voici les liaisons React officielles pour MobX.
    • bootstrap
      Nous utiliserons bootstrap version 4.5 pour styliser notre projet.
    • uuid
      Ceci est utilisé pour créer automatiquement des clés pour supprimer des listes.

    Ayant fait cela, allons-y et installons ces packages. Je vais les installer avec une alternative npm faite dans yarn:

     yarn add mobx mobx-react bootstrap@4.5.0 uuid 

    Une fois les packages installés, nous allons démarrer notre application en mode développement en exécutant le code ci-dessous dans notre terminal:

     yarn start 

    Configuration de notre App Store

    Créons un magasin pour notre projet. Tout d'abord, créez un fichier dans le répertoire racine de notre projet appelé ListStore ce sera l'emplacement central de l'état de notre application.

    Pour cette application, nous devrons créer un ListStore afin de ne pas nous répéter lorsque nous l'utilisons dans d'autres composants de l'application.

     / *** src / Store.js *** /
    
    import {observable, action, calculé} depuis "mobx";
    import {v4} de "uuid";
    
    liste des classes d'exportation {
      @ valeur observable
      @observable terminé
    
      constructeur (valeur) {
        this.id = v4 ()
        this.value = valeur
      }
    }
    
    classe d'exportation ListStore {
      @observable lists = []
      @observable filter = ""
      @action addList = (valeur) => {
        this.lists.push (nouvelle liste (valeur))
      }
     
      @action deleteList = (liste) => {
        this.lists = this.lists.filter (t => t! == liste)
      }
      @computed obtenir filteredLists () {
        const matchCase = new RegExp (this.filter, "i")
        renvoie this.lists.filter (list =>! this.filter || matchCase.test (list.value))
      }
    } 

    Dans le code ci-dessus, nous avons importé trois fonctions de mobx .

    • observable
      Ceci contient une variable qui peut être mise à jour en cas de changement d'état. [19659027] action
      Utilisé pour modifier l'état de l'application.
    • calculé
      Valeurs qui peuvent être dérivées de l'état existant ou d'autres valeurs calculées, cela change après qu'un état est modifié. [19659028] La classe List a deux valeurs d'objet qui sont done et value qui contiendront l'état initial de l'application et la modification en cas de changement. [19659010] Nous voulons que notre nouvelle liste crée automatiquement une clé afin que nous puissions obtenir automatiquement un bouton de suppression une fois qu'une liste est créée, Ici uuid est utilisé pour créer automatiquement des clés dans notre application.

      Ensuite, nous avons ajouté un fonction addList qui ajoutera des listes lorsque vous cliquez dessus en utilisant la méthode .push () t o pousser la liste dans le tableau que nous avons déjà créé dans le tableau @observable lists .

      La fonction deleteList accepte List comme une propriété qui est censée être l'élément que l'utilisateur souhaite supprimer. Ensuite, nous définissons la valeur de this.Lists sur un nouveau tableau après avoir supprimé l'élément sélectionné.

      Les deux addLists et deleteList sont des actions car elles modifier l'état de notre application lorsque des modifications sont apportées.

      Initialisation du magasin MobX

      Le prochain sur notre liste est d'importer notre magasin dans notre App.js et de l'utiliser dans notre projet. [19659037] import React de 'react';
      importer Navbar depuis "./components/navbar";
      importer ListDisplay depuis "./components/ListDisplay";
      import {ListStore} de './ListStore';
      function App () {
      const store = nouveau ListStore ()
      revenir (

      
      

      );
      }
      Export default App;

      Ici, nous avons importé les composants TitleInput et ListDisplay . Ensuite, nous avons initialisé le magasin dans notre App.js afin de pouvoir le transmettre comme accessoire aux composants TitleInput et ListDisplay .

      Normalement, cela va générer une erreur car nous n'avons pas travaillé sur les autres composants, alors faisons cela. Construisons le composant ListDisplay .

      ListDisplay

      Ce composant affiche toutes nos listes ajoutées et génère également automatiquement un bouton de suppression une fois qu'une nouvelle liste est ajoutée.

       import React de 'réagir'
      
      importer la liste de "./List";
      import {observer} de 'mobx-react';
      
      function ListDisplay (accessoires) {
        const {deleteList, filteredLists} = props.store
      
        revenir (
          
      
              
      
                 {filteredLists.map (liste => (
                  
                ))}
              
          
        )
      }
      export default observer (ListDisplay) 

      Pour ce composant, nous avons créé une fonction ListDisplay et en avons fait un observateur, nous avons également déstructuré les fonctions list et deletelist à partir du magasin, en faisant cela, nous avons facilité le passage en tant qu'élément d'objet.

      Ensuite, nous mappons à travers filteredLists pour renvoyer les listes, que nous utilisons ensuite pour construire la liste individuelle en passant l'élément renvoyé comme accessoire du composant List .

      Une fois terminé, notre composant devrait ressembler à ceci avec des listes ajoutées:

      

      Ensuite, ajoutez un composant List et TitleInput .

      List Component

      Tout comme nos autres composants, notre Le composant List exportera la liste en tant qu'observateur afin d'aider le magasin à surveiller les changements.

       import React de 'react'
      importer {observer} depuis 'mobx-react'
      Liste des fonctions (accessoires) {
        revenir (
          
      
            
      
                
      
                  
      
                     {props.list.value}
                    
                  
      
                  
                       Supprimer
                    
                  
                
            
          
        )
      }
      export default observer (List) 

      J'ai utilisé le bootstrap pour créer des cartes dans le premier ensemble de divs et aussi aligner l'icône de suppression pour se déplacer vers le côté droit de l'application. Tout d'abord, nous avons créé un composant de carte pour gérer notre liste puis nous avons créé une balise de bouton pour le bouton de suppression qui acceptera deux objets de ceci et passera un accessoire à la liste, ceci

      

      Vient ensuite notre TitleInput qui contiendra notre formulaire de saisie pour ajouter des listes et le titre du projet.

      TitleInput

      Comme pour nos autres projets, nous ajouterons une fonction @observer afin que le composant puisse accepter les accessoires de l'App Store.

      
      importer React, {useState} de 'react'
      importer {observer} depuis 'mobx-react'
      function Navbar (accessoires) {
        const [value, setValue] = useState ("")
        
        const {addList} = props.store
        const prepareAddList = (e) => {
          e.preventDefault ()
          addList (valeur)
          setValue ("")
        }
        revenir (
          
      
            
       Application de liste 
            
      
                
      
                   
                         setValue (e.target.value)} placeholder = "Entrer la liste"
                        />
                         
                    Ajouter à la liste
                  
                
            
           
        )
      }
      export default observer (Navbar) 

      Tout d'abord, nous avons initialisé un état initial. En utilisant React Hooks, nous avons ajouté un état initial appelé values ​​ que nous avons défini sur une chaîne vide. Nous l'utilisons pour conserver la valeur de ce qui est entré dans le champ de saisie. Pour en savoir plus sur React Hooks, vous pouvez consulter cet article de David Abiodun.

      Ensuite, nous avons appelé un objet pour ajouter des listes à la boutique addList et l'avons passé comme accessoire de

      Ensuite, nous avons créé une fonction prepareAddList pour accepter un objet événement pour les formulaires de saisie, nous avons également ajouté un bouton pour ajouter les listes manuellement en un clic.

      Presque terminé, nous avons besoin pour redémarrer notre serveur de projet en exécutant:

       yarn start 

      Et notre TitleInput devrait ressembler à ceci:

      

      Nous avons maintenant terminé avec tous les composants de notre application, alors assemblons-le dans notre App.js . Pour ce faire, nous devons importer nos composants titleInput et ListDisplay . Nous devons également importer notre magasin à partir du composant Store.

      Pour que MobX fonctionne dans notre application, nous devons transmettre le magasin MobX en tant qu'accessoires dans notre application et les composants individuels afin qu'ils obtiennent les propriétés et les fonctions dans le store.

       import React de 'react';
      importer Navbar depuis "./components/navbar";
      importer ListDisplay depuis "./components/ListDisplay";
      import {ListStore} de './ListStore';
      function App () {
        const store = nouveau ListStore ()
        revenir (
          
      
            
            
          
        );
      }
      Export default App; 

      Notre application devrait ressembler à ceci une fois terminée:

      

      Conclusion

      MobX est un excellent gestionnaire d'état, en particulier pour Applications basées sur React, en créant notre application de liste, nous avons appris les concepts de base de MobX, l'état, les dérivations et les actions. Une version fonctionnelle de cette application peut être trouvée ici :

      Vous pouvez aller plus loin en utilisant MobX dans la prochaine application que vous construisez qui implique la gestion de l'état. J'adorerais voir les nouveautés que vous proposez. Vous pouvez en savoir plus sur MobX et les applications de gestion d'état dans les références ci-dessous.

      Ressources et références

      (ks, ra, yk, il)