Utilisation d'immer pour React State Management

Les applications React s'appuient sur l'état pour suivre les données d'application. Le statut change avec l'interaction utilisateur. Lorsque l'état change, nous devons mettre à jour l'état affiché par l'interface utilisateur, qui est généralement implémenté à l'aide de la méthode setState de React.

Étant donné que l'état de React est immuable (ne peut pas être modifié directement), lorsque l'état devient complexe, la mise à jour de l'état devient très délicate et difficile à comprendre et à maintenir.

C'est là que Immer entre en jeu. Cet article explorera comment simplifier la gestion de l'état React à l'aide d'Immer. IMMER utilise le concept de "brouillon" (brouillon), que vous pouvez comprendre comme une copie de l'État, pas comme l'État lui-même. Vous pouvez imaginer immer effectuer une opération de copie sur l'état, puis le modifier dans un endroit sûr sans affecter l'état d'origine. Toutes les mises à jour sont effectuées sur le projet, et seules les pièces modifiées du projet seront mises à jour à l'état réel.

Par exemple, l'état de votre application est le suivant:

 this.state = {
  Nom: «Kunle»,
  Âge: 30 ans,
  Ville: «Lagos»,
  Pays: «Nigéria»
}

Si l'utilisateur célèbre son 31e anniversaire, nous devons mettre à jour la valeur de age . En utilisant IMMER, une copie d'état (brouillon) est créée.

Imaginez que cette copie soit remise à un messager, qui a remis la copie à Kunle. Il y a maintenant deux répliques: l'état actuel et le projet de réplique remis à Kunle. Kunle a modifié age en brouillon à 31. Le Messenger renvoie ensuite le projet modifié à l'application, l'application compare les deux versions et met à jour age , car c'est la seule partie du projet qui a changé.

Cette méthode ne brise pas le principe des états immuables, car l'état actuel ne sera pas modifié directement. Immer simplifie la gestion des états immuables.

Exemple pratique: feux de circulation

Créons une application de feux de circulation simple avec IMMER.

En utilisant IMMER, le code du composant est le suivant:

 const {produce} = immer;

L'application de classe étend React.
  état = {
    Rouge: «rouge», 
    Jaune: «noir», 
    vert: «noir»,
    Suivant: "jaune"
  };

  composantdidmount () {
    this.interval = setInterval (() => this.changeHandle (), 3000);
  }

  composantwillunmount () {
    ClearInterval (this.interval);
  }

  handleredlight = () => {
    this.setstate (
      produire (draft => {
        draft.red = 'red';
        draft.yellow = 'noir';
        draft.green = 'noir';
        draft.next = 'jaune';
      })
    ));
  };

  handleyelllight = () => {
    this.setstate (
      produire (draft => {
        draft.red = 'noir';
        draft.yellow = 'jaune';
        draft.green = 'noir';
        draft.next = 'green';
      })
    ));
  };

  handleGreenlight = () => {
    this.setstate (
      produire (draft => {
        draft.red = 'noir';
        draft.yellow = 'noir';
        draft.green = 'green';
        draft.next = 'red';
      })
    ));
  };

  ChangeHandle = () => {
    if (this.state.next === 'jaune') {
      this.handleyellowlight ();
    } else if (this.state.next === 'green') {
      this.handlegreenlight ();
    } autre {
      this.handleredlight ();
    }
  };

  rendre() {
    Retour (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    ));
  }
}

produce est la fonction par défaut fournie par IMMER. Nous passons cela en tant que paramètre à setState . produce reçoit une fonction qui accepte draft comme un argument. À l'intérieur de cette fonction, nous pouvons modifier draft de copie.

Une façon plus simple d'écrire:

 const handlelight = (état) => {
  return produce (état, (draft) => {
    draft.red = 'noir';
    draft.yellow = 'noir';
    draft.green = 'green';
    draft.next = 'red';
  });
};

// Utiliser dans les composants:
handleGreenlight = () => {
  const nextState = handlelight (this.state);
  this.setState (nextState);
};

Nous passons l'état actuel et la fonction qui accepte draft comme arguments à la fonction produce .

Un autre exemple: liste de courses

Si vous avez utilisé React pendant un certain temps, vous devez être familier avec l'opérateur de propagation. En utilisant IMMER, en particulier lorsque vous traitez avec l'état du tableau, vous n'avez pas besoin d'utiliser les opérateurs d'extension.

Créons une application de liste de courses pour illustrer cela.

Code de composant:

 L'application de classe étend React.
  // ... (constructeur et autres méthodes) ...

  handlesubmit = (e) => {
    E.PreventDefault ();
    const newitem = {
      id: uuid.v4 (),
      Nom: this.state.name,
      Prix: this.state.price
    };
    this.setstate (
      produire (draft => {
        draft.list = draft.list.concat (newItem);
      })
    ));
  };

  // ... (méthode de rendu) ...
}

Lors de l'ajout d'un nouveau produit, nous devons mettre à jour l'état de la liste. Utilisez les opérateurs setState et d'extension:

 handlesubmit = (e) => {
  // ...
  this.setState ({list: [... this.state.list, newItem]});
};

L'utilisation des opérateurs d'extension peut devenir très compliquée si plusieurs états doivent être mis à jour. En utilisant IMMER, cela devient très simple.

Et si nous voulons appeler la fonction de rappel après la mise à jour de l'état? Par exemple, nous voulons calculer le prix total de l'article dans la liste.

 handlesubmit = (e) => {
  // ...
  this.setstate (
    produire (draft => {
      draft.list = draft.list.concat (newItem);
    }), () => {
      this.calculateamount (this.state.list);
    }
  ));
};

calculAmount = (list) => {
  Soit Total = 0;
  list.ForEach (item => total = item.price);
  this.setstate (
    produire (draft => {
      draft.totalamount = total;
    })
  ));
};

La fonction de rappel est appelée après la mise à jour de l'état et que l'état mis à jour est utilisé.

Crochets immer

use-immer est un crochet qui vous permet de gérer l'état dans une application React. Voyons avec un compteur simple:

 importer réagir à partir de "réagir";
import {useImmer} de "use-imm";

const Counter = () => {
  const [count, updateCounter] = useImmer ({value: 0});

  fonction incrément () {
    UpdateCounter (draft => {
      draft.Value;
    });
  }

  Retour (
    <div>
      <h1 id="Compteur-count-value">Compteur {count.value}</h1>
      <button onclick="{increment}">Incrément</button>
    </div>
  ));
};

Exporter le compteur par défaut;

useImmer est similaire à useState . Il renvoie l'état et une fonction de mise à jour. Lorsque le composant est chargé, la valeur d'état est la même que la valeur transmise à useImmer . En utilisant la fonction de mise à jour renvoyée, nous pouvons créer une fonction increment pour augmenter la valeur de compteur.

IMMER fournit également un crochet similaire à useReducer : useImmerReducer .

Résumer

Vous pouvez commencer à utiliser immer dans votre prochain projet ou l'appliquer progressivement à votre projet actuel. Il simplifie React State Management. Des exemples de code peuvent être trouvés sur GitHub. (Veuillez fournir un lien github s'il existe)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!