Redux sans réagir

Cet article a été évalué par des pairs par Vildan Softic. Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu de SitePoint parfait!

Je suis le genre de développeur qui aime partir de zéro et comprendre comment tout fonctionne. Bien que je sache que cela m'apporte une charge de travail (inutile), cela m'aide à apprécier et à comprendre les mécanismes derrière un cadre, une bibliothèque ou un module spécifique.

Récemment, j'ai à nouveau expérimenté ce moment et j'ai commencé à développer une application Web en utilisant Redux et Pure JavaScript. Dans cet article, je veux décrire ma structure d'application, examiner mes itérations précoces (enfin échouées), puis regarder la solution que j'ai finalement choisie et ce que j'ai appris en cours de route.

Points clés

• Redux peut utiliser du JavaScript pur pour gérer l'état d'application sans compter sur React, démontrant sa flexibilité dans la gestion de l'État dans différentes couches d'interface utilisateur.
• Il est crucial d'initialiser et de gérer correctement le stockage redux;
• Dans les paramètres Redux uniquement, les composants peuvent être similaires à la structure des composants de React, divisés en couches de présentation et de conteneurs, ce qui aide à séparer les préoccupations et à clarifier les définitions de rôle.
• Contrairement à Dom virtuel de React (qui gère automatiquement les modifications de l'interface utilisateur en fonction des mises à jour d'état), lors de l'utilisation de JavaScript pur et redux, le DOM doit être mis à jour manuellement.
• Il est recommandé de mettre en œuvre un stockage de cas d'utilisation pour s'assurer que seules les données nécessaires sont stockées, ce qui peut améliorer les performances et l'expérience utilisateur en évitant la persistance inutile de l'état.

Paramètres

Vous avez peut-être entendu parler de la combinaison populaire React.js et Redux qui utilise la dernière technologie frontale pour créer des applications Web rapides et puissantes.

React est une bibliothèque open source basée sur des composants créée par Facebook pour créer des interfaces utilisateur. Bien que React soit juste une couche de vue ( n'est pas un cadre complet comme Angular ou Ember ), Redux gère l'état de l'application. Il agit comme un conteneur d'état prévisible où l'état entier est stocké dans un seul arbre d'objet et ne peut être modifié qu'en émettant une action dite . Si vous ne comprenez pas du tout ce sujet, je vous suggère de lire cet article.

Pour le reste de cet article, vous n'avez pas besoin d'être un expert Redux, mais au moins il sera utile d'avoir une certaine compréhension de son concept.

react-sans redux - Application à partir de zéro

L'avantage de Redux est qu'il vous oblige à penser à l'avenir et à comprendre la conception de votre application le plus tôt possible. Vous commencez à définir ce qui devrait réellement être stocké, quelles données peuvent et doivent être modifiées et quels composants peuvent accéder au stockage. Mais comme Redux se concentre uniquement sur l'état, je me retrouve un peu confus sur la façon de construire et de connecter le reste de l'application. React fait un excellent travail pour vous guider à travers toutes les étapes, mais sans elle, je dois comprendre ce qui fonctionne le mieux.

L'application en question est un clone Tetris axé sur mobile avec plusieurs vues différentes. La logique de jeu réelle se fait dans Redux, tandis que les fonctionnalités hors ligne sont fournies par LocalStorage et le traitement de vue personnalisé. Le référentiel peut être trouvé sur GitHub, bien que l'application soit toujours en cours de développement actif et j'ai écrit cet article pendant le développement.

Définir l'architecture d'application

J'ai décidé d'adopter la structure du dossier courant dans les projets Redux et React. Il s'agit d'une structure logique qui fonctionne pour de nombreux paramètres différents. Il existe de nombreuses variations de ce sujet, la plupart des projets sont légèrement différents, mais la structure globale est la même.

src / scripts /

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Mes balises sont séparées en un autre répertoire et finissent par être rendues par un seul fichier index.html. Cette structure est similaire aux scripts / pour maintenir une architecture cohérente dans toute la base de code.

src / balisage /

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

Gérer et accéder au stockage

Pour accéder au stockage, vous devez la créer et le transmettre à toutes les instances de l'application une fois. La plupart des cadres utilisent une sorte de conteneur d'injection de dépendance, donc nous, les utilisateurs de framework, n'avons pas à trouver de solutions par eux-mêmes. Mais quand j'utilise ma propre solution, comment puis-je la rendre disponible pour tous mes composants?

Ma première itération a échoué. Je ne sais pas pourquoi je pense que c'est une bonne idée, mais j'ai mis le stockage dans son propre module (scripts / store / index.js) qui peut ensuite être importé par le reste de l'application. J'ai fini par le regretter et j'ai rapidement traité des dépendances circulaires. Le problème est que lorsque le composant essaie d'accéder au stockage, le stockage n'est pas initialisé correctement. J'ai fait un graphique pour démontrer le flux de dépendance sur lequel je travaille:

Le point de saisie de l'application est en train d'initialiser tous les composants, puis d'utiliser le stockage en interne directement ou via des fonctions d'assistance (ici appelé connect ). Cependant, comme le stockage n'est pas créé explicitement, mais n'est qu'un effet secondaire dans son propre module, le composant finit par utiliser le stockage avant sa création. Il n'y a pas de contrôle sur le temps où un composant ou une fonction d'assistance est d'abord appelé à stocker. C'est très déroutant.

Le module de stockage est le suivant:

scripts / store / index.js (☓ bad)

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Comme mentionné ci-dessus, le stockage est créé comme effet secondaire puis exporté. Les fonctions d'assistance doivent également être stockées.

scripts / store / connect.js (☓ bad)

import store from './'

export function getItemList () {
  return store.getState().items.all
}

C'est exactement le moment où mes composants finissent par se reproduire les uns aux autres. Les fonctions d'assistance nécessitent un stockage pour s'exécuter et sont exportées à partir du fichier d'initialisation de stockage en même temps afin qu'ils puissent accéder à d'autres parties de l'application. Voyez-vous à quel point cela semble désordonné?

Solution

Cela semble évident maintenant, et il m'a fallu un certain temps pour comprendre. J'ai résolu cela en déplaçant l'initialisation vers mon point de saisie d'application (scripts / index.js) et en le faisant passer à tous les composants requis.

Encore une fois, cela est très similaire à la façon dont React rend réellement accessible le stockage (voir le code source). Il y a une raison pour laquelle ils travaillent si bien ensemble, pourquoi ne pas apprendre son concept?

Le point d'entrée de l'application crée d'abord le stockage puis le transmet à tous les composants. Le composant peut ensuite se connecter aux opérations de stockage et de planification, souscrire à des modifications ou obtenir des données spécifiques. Regardons les changements:

scripts / store / configurestore.js

(✓ bon)

J'ai gardé le module, mais j'ai plutôt exporté une fonction appelée configurestore qui crée un stockage ailleurs dans la base de code.

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Notez que ce n'est qu'un concept de base; j'ai également utilisé l'extension Redux Devtools et chargé l'état persistant via LocalStorage.

scripts / store / connect.js

(✓ bon)

Connexion La fonction d'assistance n'a pas changé, mais maintenant le stockage doit être passé comme paramètre. Au début, j'ai hésité à utiliser cette solution parce que je pensais

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

"Alors, que signifie la fonction d'assistance?" Maintenant, je pense qu'ils sont assez bons et avancés pour rendre tout plus facile à lire.

scripts / index.js

Il s'agit du point d'entrée de l'application. Le magasin est créé et transmis à tous les composants. PageControls ajoute un écouteur d'événements mondial pour les boutons d'action spécifiques, et Tetrisgame est le composant de jeu réel. Il se ressemble essentiellement avant de déplacer le stockage ici, mais ne passe pas le stockage séparément à tous les modules. Comme mentionné précédemment, le composant peut accéder au stockage via ma méthode de connexion échouée.

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Composants

J'ai décidé d'utiliser deux composants: Couche de présentation

et

Composant de conteneur . Les composants de présentation ne font que le traitement pur DOM; ils ne connaissent pas le stockage. D'un autre côté, le composant conteneur peut planifier des actions ou s'abonner aux modifications. Dan Abramov a écrit un excellent article pour React Composants, mais cet ensemble de méthodes peut également être appliqué à toute autre architecture de composants.

Cependant, il y a des exceptions pour moi. Parfois, les composants sont très petits et ne font qu'une seule chose. Je ne veux pas les diviser en l'un des modèles ci-dessus, j'ai donc décidé de les mélanger. Si le composant grandit et devient plus logique, je le séparerai.

scripts / composants / pageControls.js

L'exemple ci-dessus est l'un des composants. Il dispose d'une liste d'éléments (dans ce cas tous les éléments avec des attributs de données-action) et planifie des actions lorsqu'il est cliqué sur la base du contenu d'attribut. C'est tout. D'autres modules peuvent alors écouter les changements de stockage et se mettre à jour en conséquence. Comme mentionné précédemment, si le composant a également une mise à jour DOM, je le séparerai.

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Maintenant, permettez-moi de vous montrer une séparation claire de ces deux types de composants.

Mettre à jour Dom

Un problème plus important que j'ai eu lorsque j'ai commencé le projet était de savoir comment mettre à jour le DOM. React utilise une représentation en mémoire rapide d'un Dom appelé DOM virtuel pour minimiser les mises à jour DOM.

Je pense vraiment à faire la même chose, si mon application grossit et que Dom est plus fastidieux, je pourrais passer à un DOM virtuel, mais pour l'instant je fais Classic DOM Operation, qui Fonctionne bien avec Redux.

Le processus de base est le suivant:

• Initialisez une nouvelle instance du composant de conteneur et transmettez le stockage pour une utilisation interne
• Modifications du stockage d'abonnement des composants
• et rendent les mises à jour dans DOM en utilisant différentes composants de couche de présentation

Remarque: Je suis un fan du préfixe de symbole $ pour tout ce qui concerne DOM en JavaScript. Comme vous pouvez le deviner, il est prélevé sur le $ de JQuery. Par conséquent, le nom du fichier de composant Pure de présentation est préfixé avec le signe du dollar.

scripts / index.js

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Rien d'extraordinaire ici. Importez, créez et initialisez le composant de conteneur ScoreObserver. Que fait exactement? Il met à jour tous les éléments de vue liés aux scores: liste de scores élevés et informations actuelles de score pendant le jeu.

scripts / composants / scoreObserver / index.js

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

N'oubliez pas, il s'agit d'un composant simple; d'autres composants peuvent avoir une logique plus complexe et des choses à gérer. Que se passe-t-il ici? Le composant ScoreObserver enregistre les références internes au stockage et crée deux composants au niveau de la présentation de la nouvelle instance pour une utilisation ultérieure. La méthode INIT s'abonne aux mises à jour de stockage et met à jour le composant de l'étiquette $ chaque fois que le stockage change - mais uniquement si le jeu est réellement en cours d'exécution.

La méthode de mise à jour de mise à jour est utilisée ailleurs. Il n'est pas logique de mettre à jour la liste chaque fois qu'un changement se produit, car la vue est de toute façon inactive. Il existe également un composant de routage qui met à jour ou désactive un composant différent chaque fois que la vue change. Son API est à peu près comme suit:

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Remarque: $ (et $$) n'est pas une référence jQuery, mais un raccourci utilitaire pratique vers document.QuerySelector.

scripts / composants / scoreObserver / $ board.js

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Encore une fois, il s'agit d'un exemple de base et d'un composant de base. La méthode UpdateBoard () prend un tableau, itère dessus et insère le contenu dans la liste des scores.

scripts / composants / scoreObserver / $ label.js

import { createStore } from 'redux'
import reducers from '../reducers'

export default function configureStore () {
  return createStore(reducers)
}

Ce composant est presque exactement le même que le tableau de bord ci-dessus, mais met à jour uniquement un seul élément.

Autres erreurs et suggestions

Un autre point important consiste à implémenter le stockage axé sur le cas d'utilisation. Je pense qu'il est important de simplement stocker du contenu essentiel à l'application. Au début, j'ai presque tout stocké: la vue active actuelle, les paramètres de jeu, les scores, les effets de survol, Mode respiratoire de l'utilisateur et ainsi de suite.

Bien que cela puisse être lié à une application, cela n'a rien à voir avec un autre. Il peut être agréable de stocker la vue actuelle et de continuer exactement au même endroit lorsqu'il est rechargé, mais dans mon cas, cela ressemblait à une mauvaise expérience utilisateur et plus ennuyeux qu'utile. Vous ne voulez pas stocker des menus ou des commutateurs modaux, non? Pourquoi les utilisateurs doivent-ils revenir à cet état spécifique? Dans les plus grandes applications Web, cela peut avoir un sens. Mais dans mon petit jeu de focus de jeu mobile, revenir à l'écran des paramètres simplement parce que je suis parti de là, ce qui est assez ennuyeux.

Conclusion

J'ai fait mon projet Redux avec et sans réagir, et mon principal point à retenir est que l'énorme différence dans la conception des applications n'est pas nécessaire. La plupart des méthodes utilisées dans React peuvent en fait s'adapter à tout autre paramètre de traitement de la vue. Il m'a fallu un certain temps pour réaliser cela parce que je pensais au début que je devais faire quelque chose de différent, mais j'ai fini par trouver que ce n'était pas nécessaire. Cependant, ce qui est différent, c'est la façon dont vous initialisez les modules, comment vous les stockez et dans quelle mesure les composants comprennent l'état global d'application. Le concept reste le même, mais l'implémentation et le volume de code sont parfaits pour vos besoins.

redux est un excellent outil qui aide à créer votre application de manière plus réfléchie. L'utiliser seul sans aucune vue peut être très délicate au début, mais une fois que vous avez surmonté la confusion initiale, rien ne peut vous arrêter. Que pensez-vous de ma méthode? Utilisez-vous Redux et différentes vues pour gérer les paramètres seuls? J'adorerais avoir de vos nouvelles et en discuter dans les commentaires.

Si vous souhaitez en savoir plus sur Redux, consultez notre cours de cours "Réécrire et tester Redux pour résoudre les problèmes de conception" Mini cours. Dans ce cours, vous construirez une application Redux qui reçoit des tweets organisés par sujet via une connexion WebSocket. Pour vous donner une idée de ce qui va se passer, consultez le cours gratuit ci-dessous.

---

Chargement du lecteur… FAQ sur React-Free Redux (FAQ) Quelle est la principale différence entre l'utilisation de Redux et React et ne pas utiliser React?

redux est un conteneur d'état prévisible pour les applications JavaScript qui peuvent être utilisées avec n'importe quelle couche d'interface utilisateur. La principale différence entre l'utilisation de Redux vs React et ne pas utiliser React est la façon dont la couche d'interface utilisateur interagit avec le stockage redux. Lorsqu'il est utilisé avec React, Redux peut tirer parti de l'architecture basée sur les composants de React et son approche de cycle de vie pour gérer automatiquement les mises à jour des composants lorsque les modifications d'état sont effectuées. Sans réagir, vous devez vous abonner manuellement au stockage et gérer les mises à jour de l'interface utilisateur lorsque l'état modifie.

Comment gérer les opérations asynchrones en redux sans réagir?

Les opérations asynchrones dans Redux sont généralement manipulées à l'aide de middleware telles que Redux Thunk ou Redux Saga. Ces middleware vous permettent de planifier des fonctions (Thunks) ou des opérations asynchrones plus complexes (Sagas), plutôt que des objets ordinaires. Même sans réagir, vous pouvez toujours utiliser ces middleware dans Redux Storage. Il vous suffit d'appliquer le middleware lors de la création de stockage à l'aide de la fonction appliquée de Redux.

Puis-je utiliser Redux Devtools sans réagir?

Oui, Redux Devtools ne dépend pas de React et peut être utilisé avec n'importe quelle couche d'interface utilisateur qui utilise Redux. Vous pouvez intégrer Redux Devtools dans votre application en l'ajoutant en tant que middleware lors de la création de stockage Redux. Cela vous permettra de vérifier l'état et les actions de votre application en temps réel, même sans réagir.

Comment se connecter à Redux Storage dans mon composant d'interface utilisateur sans réagir?

sans react et sa fonction de connexion, vous devez vous abonner manuellement au stockage redux et mettre à jour les composants de l'interface utilisateur lorsque l'état change. Vous pouvez vous abonner au magasin à l'aide de la méthode Store.Subscribe, qui prend une fonction d'écoute qui sera appelée chaque fois que l'opération est planifiée. Dans cette fonction d'écoute, vous pouvez utiliser Store.getState pour obtenir l'état actuel du stockage et mettre à jour les composants de l'interface utilisateur en conséquence.

Puis-je utiliser Redux avec d'autres bibliothèques ou des frameworks comme Vue ou Angular?

Oui, Redux ne compte pas sur React et peut être utilisé avec n'importe quelle couche d'interface utilisateur. Pour d'autres bibliothèques et cadres tels que Vue et Angular, des liaisons sont fournies qui fournissent des fonctionnalités similaires à la fonction de connexion de React. Ces liaisons vous permettent de connecter facilement les composants de l'interface utilisateur au stockage Redux et de gérer les mises à jour des composants lorsque l'état change.

Comment tester mon code redux sans réagir?

Tester le code redux sans réact est similaire à le tester avec React. Vous pouvez créer des tests unitaires pour vos créateurs et réducteurs d'action à l'aide de n'importe quel framework de test JavaScript comme Jest ou Mocha. Pour tester les opérations asynchrones, vous pouvez utiliser le stockage simulé pour simuler le stockage Redux.

Comment gérer les effets secondaires dans Redux sans réagir?

Les effets secondaires de Redux sont généralement manipulés à l'aide de middleware tels que Redux Thunk ou Redux Saga. Ces middleware vous permettent de planifier des fonctions avec des effets secondaires ou des opérations asynchrones plus complexes, telles que passer des appels API. Même sans réagir, vous pouvez toujours utiliser ces middleware dans Redux Storage.

Puis-je utiliser Redux avec du javascript pur?

Oui, Redux peut être utilisé avec un JavaScript pur. Vous pouvez créer une boutique Redux, planifier des actions et vous abonner à des modifications de l'état en utilisant uniquement JavaScript pur. Cependant, s'il n'y a pas de bibliothèque ou de cadre comme réagir pour gérer les mises à jour de l'interface utilisateur, vous devez mettre à jour manuellement les composants de l'interface utilisateur lorsque l'état change.

Comment construire du code redux sans réagir?

La structure du code redux ne dépend pas de savoir si vous utilisez React. Vous pouvez toujours suivre les mêmes meilleures pratiques pour construire du code Redux, telles que la séparation des opérations, des réducteurs et des sélecteurs en différents fichiers ou dossiers et organisant votre état de manière normalisée et modulaire.

Puis-je utiliser Redux Middleware sans réagir?

Oui, Redux Middleware ne dépend pas de React et peut être utilisé avec n'importe quelle couche d'interface utilisateur qui utilise Redux. Le middleware dans Redux est utilisé pour gérer les effets secondaires et les opérations asynchrones, etc. Vous pouvez utiliser le middleware Appliquer Redux sur votre stockage redux à l'aide de la fonction appliquée de Redux, que vous utilisiez React ou non.

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!