React introduction, Part 3
); Aujourd’hui, nous apprendrons comment mettre en oeuvre correctement et mieux la gestion de l’état. Mais tout d’abord, je voudrais me concentrer sur un exemple plus complexe: étendons notre application pour qu’elle puisse avoir plusieurs compteurs en même temps et apprenons comment gérer tous les compteurs en utilisant WordPress store. Le résultat final (que nous allons mettre en œuvre dans le prochain article) est similaire à:
Implémenter plusieurs compteurs en utilisant les composants REACT et le stockage WordPress basé sur Redux. Définissez l’état de notre application lorsque vous travaillez avec ce type de problème, vous devriez d’abord réfléchir à la façon dont vous gérez l’état de votre application. De plus, en supposant que vous ne puissiez lire et écrire l’état qu’en utilisant des fonctions, la façon la plus simple est de considérer son API: une fonction qui vous permet d’interroger et de mettre à jour l’état. Dans notre exemple, je pourrais suggérer: ajouter un nouveau compteur Clear Counter x set Counter value x obtenir une liste de tous les compteurs dans l’application obtenir Counter value X, mais vous pourriez avoir besoin d’utiliser une méthode différente (par exemple, vous pourriez avoir besoin de créer une fonction pour augmenter un compteur et créer une autre fonction pour le réduire).
Une fois cette interface définie, vous devriez envisager les informations nécessaires pour suivre cet état, en particulier la structure de données à utiliser. Dans notre exemple, nous voulons tracer plusieurs compteurs et, pour chaque compteur X, nous voulons connaître leurs valeurs. Quelles structures de données peuvent nous aider dans cette entreprise? Selon ce que X est, vous devrez peut – être utiliser une ou une autre structure de données. Par exemple, si X est un index de compteur (c. – à – D. que vous voulez pouvoir récupérer les valeurs du premier, du deuxième ou du troisième compteur), la matrice numérique peut être suffisante. Si vous voulez que X soit un identificateur de compteur unique, vous pouvez utiliser
Une autre approche. Par exemple, vous voudrez peut – être utiliser un dictionnaire avec une paire ID \/ Value:
Compteur constant = {ae13a: 0, f18bb: 3, e889a: 1, 8b1d3: – 5,}; Ou tableau d’objets: compteur constant = [{id: ‘ae13a’, valeur: 0}, {id: ‘f18bb’, valeur: 3}, {id: ‘e889a’, valeur: 1}, {id: ‘8b1d3’, valeur: – 5}]] Si vous définissez d’abord l’interface (Setter et getter, si vous voulez) pour manipuler et accéder à l’état de l’application, alors la façon dont l’état lui – même est mis en œuvre est une boîte noire. Cela signifie que vous pouvez modifier le stockage lui – même à tout moment, et tant que vous maintenez l’API, les choses se déroulent comme prévu. La création d’un module de données WordPress basé sur Redux avec WordPress vous permet de définir un ou plusieurs magasins pour gérer l’état de votre application. Pour créer un nouveau stockage en utilisant ce paquet, il suffit d’utiliser la fonctionnalité registerstore dans les sujets suivants:
Un nom qui identifie de façon unique votre stockage un sélecteur d’objets et tous les getters récupèrent les données de l’archive un objet d’action a la capacité d’activer les demandes de mise à jour (nous en discuterons plus loin dans cet article) une fonction de réduction est responsable de mettre à jour l’état lorsque certaines actions sont activées nous montre un exemple réel, n’est – ce pas? Continuez avec l’exemple de la semaine dernière et créez un nouveau dossier de stockage dans SRC. Puis créez un fichier index. JS inside, Code comme suit: \/ \/ Import {registerstore} from \
Comme notre magasin pour s’assurer qu’il est unique: nous combinons le nom du plugin (exemple de REACT) avec le mot (compteur) qui définit le magasin. Du calme!
Fonctionnement en magasin en principe, chaque magasin a besoin d’un ensemble de fonctions qui nous permettent de changer son statut. Dans notre exemple, le partage se trouve dans src \/ store \/ actions. В: fonction d’exportation addcounter (counterid) {renvoie {type: ‘add _ Counter’, counterid,};} Export Function removecounter (counterid) {return {type: ‘remove _ Counter’, counterid,};} Exporter la fonction setcountervalue (counterid, value) {renvoie {type: ‘Set _ Counter Value’, counterid, value,};} Comme prévu, notre magasin dispose de trois actions pour mettre à jour son statut:
Une fois cette interface définie, vous devriez envisager les informations nécessaires pour suivre cet état, en particulier la structure de données à utiliser. Dans notre exemple, nous voulons tracer plusieurs compteurs et, pour chaque compteur X, nous voulons connaître leurs valeurs. Quelles structures de données peuvent nous aider dans cette entreprise? Selon ce que X est, vous devrez peut – être utiliser une ou une autre structure de données. Par exemple, si X est un index de compteur (c. – à – D. que vous voulez pouvoir récupérer les valeurs du premier, du deuxième ou du troisième compteur), la matrice numérique peut être suffisante. Si vous voulez que X soit un identificateur de compteur unique, vous pouvez utiliser
Une autre approche. Par exemple, vous voudrez peut – être utiliser un dictionnaire avec une paire ID \/ Value:
Compteur constant = {ae13a: 0, f18bb: 3, e889a: 1, 8b1d3: – 5,}; Ou tableau d’objets: compteur constant = [{id: ‘ae13a’, valeur: 0}, {id: ‘f18bb’, valeur: 3}, {id: ‘e889a’, valeur: 1}, {id: ‘8b1d3’, valeur: – 5}]] Si vous définissez d’abord l’interface (Setter et getter, si vous voulez) pour manipuler et accéder à l’état de l’application, alors la façon dont l’état lui – même est mis en œuvre est une boîte noire. Cela signifie que vous pouvez modifier le stockage lui – même à tout moment, et tant que vous maintenez l’API, les choses se déroulent comme prévu. La création d’un module de données WordPress basé sur Redux avec WordPress vous permet de définir un ou plusieurs magasins pour gérer l’état de votre application. Pour créer un nouveau stockage en utilisant ce paquet, il suffit d’utiliser la fonctionnalité registerstore dans les sujets suivants:
Un nom qui identifie de façon unique votre stockage un sélecteur d’objets et tous les getters récupèrent les données de l’archive un objet d’action a la capacité d’activer les demandes de mise à jour (nous en discuterons plus loin dans cet article) une fonction de réduction est responsable de mettre à jour l’état lorsque certaines actions sont activées nous montre un exemple réel, n’est – ce pas? Continuez avec l’exemple de la semaine dernière et créez un nouveau dossier de stockage dans SRC. Puis créez un fichier index. JS inside, Code comme suit: \/ \/ Import {registerstore} from \
Comme notre magasin pour s’assurer qu’il est unique: nous combinons le nom du plugin (exemple de REACT) avec le mot (compteur) qui définit le magasin. Du calme!
Fonctionnement en magasin en principe, chaque magasin a besoin d’un ensemble de fonctions qui nous permettent de changer son statut. Dans notre exemple, le partage se trouve dans src \/ store \/ actions. В: fonction d’exportation addcounter (counterid) {renvoie {type: ‘add _ Counter’, counterid,};} Export Function removecounter (counterid) {return {type: ‘remove _ Counter’, counterid,};} Exporter la fonction setcountervalue (counterid, value) {renvoie {type: ‘Set _ Counter Value’, counterid, value,};} Comme prévu, notre magasin dispose de trois actions pour mettre à jour son statut:
Addcounter: ajouter de nouveaux compteurs à notre magasin. Le seul paramètre requis est l’ID du nouveau compteur. Removecounter: supprime la fonction d’un compteur existant. De même, le seul paramètre dont nous avons besoin est l’ID du compteur à supprimer. Setcountervalue: fonction qui définit une nouvelle valeur sur un compteur donné. Apparemment, cette fonction prend deux arguments: l’ID du compteur à mettre à jour et sa nouvelle valeur. Maintenant, si vous regardez attentivement chaque action, vous pourriez être surpris: aucune de ces actions ne semble mettre à jour quoi que ce soit. Au lieu de cela, ils retournent les articles. Qu’est – ce qui se passe ici?
Dans Redux (le stockage WordPress est basé sur Redux), l’opération ne modifie pas directement le stockage. Au lieu de cela, ils génèrent un objet qui signale une demande de mise à jour. Ces demandes suivent toujours le même schéma: il s’agit d’un objet avec des propriétés de type qui identifient de façon unique la demande, ainsi que toutes les autres propriétés nécessaires pour appliquer correctement la mise à jour demandée. Voyons comment mettre à jour l’état… Mise en œuvre du réducteur pour la mise à jour
Shopping Si l’action du magasin n’est qu’une demande de mise à jour, nous avons besoin de quelqu’un ou quelque chose pour réellement mettre à jour l’état du magasin lors de l’envoi de la demande. C’est ce que fait le réducteur.
Reducer est une fonction qui détecte l’état actuel de l’application et les actions envoyées par quelqu’un, et met à jour l’état en appliquant les mises à jour requises. Dans la section précédente, nous avons vu que notre stockage comporte trois opérations, de sorte que notre réducteur doit pouvoir les appliquer: importer {omit} à partir de \
Interrogez – le. Il suffit de définir un sélecteur. Js avec la fonction de requête souhaitée: Export Function getcounterid (State) {return object.key (State);} Export Function getcountervalue (State, counterid) {return Status [counterid]} C’est tout! C’est évident, non? Un sélecteur de stockage est une fonction qui accepte (au moins) un paramètre (état de stockage) et renvoie une valeur spécifique. Bien sûr, le sélecteur peut avoir plusieurs paramètres si vous devez retourner une valeur spécifique du stockage. Par exemple, dans notre exemple, nous avons créé deux sélecteurs: getcounterid renvoie un tableau d’identificateurs de compteur. Parce que nous implémentons le stockage à l’aide d’un dictionnaire \/ objet, nous ne sommes intéressés que par le retour de son objet. Les clés. Getcountervalue renvoie une valeur spécifique pour un compteur donné. Cette fonction prend deux paramètres (l’état actuel de l’application et l’ID du compteur qui nous intéresse) et renvoie la valeur souhaitée. Comment tester notre stockage pour vérifier qu’il fonctionne, ouvrez le fichier src \/ index. JS and Import: \/ \/ Import Dependencies Import {render} from \
Vous permet de visualiser correctement les outils stockés par Redux: Les extensions Redux devtools de Firefox et Chrome vous permettent de vérifier facilement l’état du magasin Redux. En fait, le post d’aujourd’hui est un peu plus long que prévu, donc nous ne voyons pas encore comment utiliser ce magasin pour améliorer notre interface utilisateur. Mais j’espère que cette explication vous aidera à comprendre comment fonctionne le stockage WordPress et comment les utiliser pour gérer l’état des plug – ins. La semaine prochaine, nous reprendrons l’exemple d’aujourd’hui et nous connecterons notre composant React au magasin afin a) que ce que nous voyons dans l’interface utilisateur soit basé sur l’état stocké dans le magasin, et b) que l’interaction utilisateur – interface utilisateur mette à jour le magasin (et l’interface utilisateur elle – même). Mais pour vous assurer que vous êtes satisfait de ce que j’ai montré aujourd’hui, permettez – moi de vous proposer quelques tâches: Modifier le stockage que nous implémentons aujourd’hui pour stocker les données comme suit: compteur constant = [{id: ‘ae13a’, valeur: 0}, {id: ‘f18bb’, valeur: 3}, {id: ‘e889a’, valeur: 1}, {id: ‘8b1d3’, valeur: – 5}]; Il n’a plus de dictionnaire. N’oubliez pas que vous devrez peut – être mettre à jour le sélecteur, le fonctionnement et le réducteur pour qu’ils fonctionnent correctement! La semaine prochaine, je partagerai des photos d’Annie theby sur unsplash.
Dans Redux (le stockage WordPress est basé sur Redux), l’opération ne modifie pas directement le stockage. Au lieu de cela, ils génèrent un objet qui signale une demande de mise à jour. Ces demandes suivent toujours le même schéma: il s’agit d’un objet avec des propriétés de type qui identifient de façon unique la demande, ainsi que toutes les autres propriétés nécessaires pour appliquer correctement la mise à jour demandée. Voyons comment mettre à jour l’état… Mise en œuvre du réducteur pour la mise à jour
Shopping Si l’action du magasin n’est qu’une demande de mise à jour, nous avons besoin de quelqu’un ou quelque chose pour réellement mettre à jour l’état du magasin lors de l’envoi de la demande. C’est ce que fait le réducteur.
Reducer est une fonction qui détecte l’état actuel de l’application et les actions envoyées par quelqu’un, et met à jour l’état en appliquant les mises à jour requises. Dans la section précédente, nous avons vu que notre stockage comporte trois opérations, de sorte que notre réducteur doit pouvoir les appliquer: importer {omit} à partir de \
Interrogez – le. Il suffit de définir un sélecteur. Js avec la fonction de requête souhaitée: Export Function getcounterid (State) {return object.key (State);} Export Function getcountervalue (State, counterid) {return Status [counterid]} C’est tout! C’est évident, non? Un sélecteur de stockage est une fonction qui accepte (au moins) un paramètre (état de stockage) et renvoie une valeur spécifique. Bien sûr, le sélecteur peut avoir plusieurs paramètres si vous devez retourner une valeur spécifique du stockage. Par exemple, dans notre exemple, nous avons créé deux sélecteurs: getcounterid renvoie un tableau d’identificateurs de compteur. Parce que nous implémentons le stockage à l’aide d’un dictionnaire \/ objet, nous ne sommes intéressés que par le retour de son objet. Les clés. Getcountervalue renvoie une valeur spécifique pour un compteur donné. Cette fonction prend deux paramètres (l’état actuel de l’application et l’ID du compteur qui nous intéresse) et renvoie la valeur souhaitée. Comment tester notre stockage pour vérifier qu’il fonctionne, ouvrez le fichier src \/ index. JS and Import: \/ \/ Import Dependencies Import {render} from \
Vous permet de visualiser correctement les outils stockés par Redux: Les extensions Redux devtools de Firefox et Chrome vous permettent de vérifier facilement l’état du magasin Redux. En fait, le post d’aujourd’hui est un peu plus long que prévu, donc nous ne voyons pas encore comment utiliser ce magasin pour améliorer notre interface utilisateur. Mais j’espère que cette explication vous aidera à comprendre comment fonctionne le stockage WordPress et comment les utiliser pour gérer l’état des plug – ins. La semaine prochaine, nous reprendrons l’exemple d’aujourd’hui et nous connecterons notre composant React au magasin afin a) que ce que nous voyons dans l’interface utilisateur soit basé sur l’état stocké dans le magasin, et b) que l’interaction utilisateur – interface utilisateur mette à jour le magasin (et l’interface utilisateur elle – même). Mais pour vous assurer que vous êtes satisfait de ce que j’ai montré aujourd’hui, permettez – moi de vous proposer quelques tâches: Modifier le stockage que nous implémentons aujourd’hui pour stocker les données comme suit: compteur constant = [{id: ‘ae13a’, valeur: 0}, {id: ‘f18bb’, valeur: 3}, {id: ‘e889a’, valeur: 1}, {id: ‘8b1d3’, valeur: – 5}]; Il n’a plus de dictionnaire. N’oubliez pas que vous devrez peut – être mettre à jour le sélecteur, le fonctionnement et le réducteur pour qu’ils fonctionnent correctement! La semaine prochaine, je partagerai des photos d’Annie theby sur unsplash.