Pourquoi la gestion de l’état comme Redux résout – elle vos problèmes?

Ce n’est que récemment que j’ai réalisé que je travaillais sur WordPress, PHP et Javascript depuis un certain temps. Au cours des cinq à six dernières années, j’ai appris des pratiques exemplaires qui ne sont plus les meilleures. Par exemple, la gestion de l’état – la pratique d’y mettre toutes les valeurs dynamiques d’une application – l’utilisateur insère des formulaires, des messages sur la page courante, etc. Dans un endroit, c’est rare. Je ne peux pas imaginer la vie sans tout mon état en un seul endroit. Lorsque j’ai commencé à écrire Javascript, j’ai utilisé la méthode Val () de jquery si j’avais besoin de connaître ou de mettre à jour les valeurs des champs du module. Si vous devez faire quelque chose chaque fois que vous changez, je m’abonne à ses modifications en utilisant la méthode change () de jquery. Évidemment, Val () n’active pas les événements de changement, donc je dois me souvenir d’utiliser jquery. Trigger ().
Il s’agit d’un exemple de modèle qui commence simplement – – il n’y a rien de compliqué à apprendre – – et qui devient rapidement instable et peu performant. Apprendre à utiliser des solutions de gestion d’état comme Redux est un autre problème complexe qui prend du temps. Si elle est utilisée correctement, la gestion de l’état est une complexité supplémentaire dans la structure de l’application, ce qui rend le développement et la mise à l’essai de l’application moins complexes. Les progrès technologiques ont été rapides et la meilleure pratique est maintenant la gestion nationale. La gestion de l’état utilise des outils comme Redux, qui est très populaire dans les applications React, pour créer une seule source réelle pour l’état de l’application. C’est très similaire à l’utilisation de conteneurs, un sujet dont j’ai discuté dans le contexte PHP.
Dans cet article, je décrirai les problèmes résolus par des outils de gestion d’état tels que Redux. Dans mon prochain article, je discuterai du partage des composants entre l’application REACT et le bloc Gutenberg. Une partie essentielle de cet article est l’utilisation de l’abstraction Redux de WordPress. Commençons par PERC.
N objets au lieu de cartes. Il est important de noter que je recommande fortement de commencer par les objets, mais d’envisager d’autres types de données qui pourraient être plus faciles à gérer. Réducteur dans Redux, l’état est géré par la fonction de décélération. Dans la programmation fonctionnelle, comme un tableau. Réduire () en javascript, obtient la collection d’entrées et la réduit à une seule valeur. Cette seule valeur de sortie peut être n’importe quel type. Vous pouvez compter les entrées et retourner les totaux en entier.
Réduire le réducteur obtient l’état actuel et renvoie le nouvel état. Parce que React ne rend à nouveau que lorsque l’objet change, plutôt que lorsque l’objet change, nous voulons presque toujours retourner un nouvel objet dans Reducer. En général, nous utilisons Reducer pour la collecte de données et spécifions les actions spécifiques sur lesquelles vous souhaitez effectuer Reducer. Dans Redux, nous appelons ces actions, et dans vuex, nous les appelons mutations. À mon avis, les mutations sont un meilleur terme parce qu’elles changent d’état, mais lorsque nous envoyons ces actions dans Redux, les actions sont une bonne métaphore qui les mappe au bon réducteur et applique l’intergiciel.
La fonction de réduction prend généralement l’objet comme deuxième argument, qui est action, et utilise le passage à la structure de contrôle action. Type Par exemple, Notez que j’utilise l’opérateur de propagation pour revenir à l’état. Mon but est d’ajouter à Array Store dans l’état. Processeur. J’aurais pu utiliser l’état. Processeur. Push () modifie le tableau et retourne à l’état. L’objet est mis à jour au besoin, mais React ne le fait pas. Pourquoi? Comme la variation du tableau (type d’objet) ne crée pas de nouvel objet, elle met à jour l’objet auquel la référence répond. Nous devons fournir un nouveau produit.
C’est une question éternelle. JS resolve. Je vous suggère
Le troisième utilisateur du processeur de formulaires Caldera, ici le sélecteur pour obtenir le gestionnaire d’identification de l’État: l’ajout d’un sélecteur à une application nécessite une bibliothèque en tant que re – sélection ou module de données WordPress, dont je parlerai dans le prochain article. Jusqu’à présent, j’ai utilisé des fonctions pour tout ce que j’ai montré. Ces fonctions doivent être synchronisées. Dans Redux, l’intergiciel est utilisé pour les opérations asynchrones. D’après mon expérience, c’est probablement la partie la plus complexe de la configuration Redux. La solution la plus simple que j’ai trouvée est le module de données WordPress. Dans le datastore WordPress, vous pouvez ajouter un analyseur. Cette fonction Parser peut être asynchrone et appelée la première fois qu’un sélecteur du même nom est appelé avec un paramètre donné. Par exemple, si nous avons un sélecteur et un analyseur nommé getpost pour suivre le stockage d’un tableau de postes, alors pour la première fois, le sélecteur getpost est appelé une requête API WordPress rest et le résultat est défini à status. Les sections suivantes de cet article utilisent simplement la valeur de l’état. Il s’agit d’une mise en œuvre simple et agréable du chargement lent des données. Si vous avez un sélecteur et un analyseur pour chaque requête de page, le défilement infini et le chargement de plusieurs types d’interfaces deviennent faciles à gérer. Voici un exemple pratique tiré du bloc Gutenberg formé par le cratère: Ce sont les bases. Il y a assez d’informations pour démarrer Redux. Je vous suggère d’essayer le contre – exemple et de regarder cet article sur le modèle Redux + React design de l’équipe React de Dan Abramov. J’ai également présenté ce sujet à la Conférence JavaScript for WP, où vous pouvez voir mes diapositives. Dans mon prochain article, je vais vous montrer comment utiliser le module de données Gutenberg de wordpress pour connecter l’état d’hébergement Redux à l’application React, y compris le bloc g
Utenberg.