3 approches de l’état dans Redux – Meilleure programmation

Online Coding Courses for Kids

Commençons avec constants.js. Copiez le code suivant:

Dans Redux, vous interagissez avec l’État via des actions. Les actions sont des objets simples qui doivent avoir un attribut type. La meilleure pratique consiste à avoir l’attribut type sous forme de chaîne. Mais comme les chaînes sont sujettes aux erreurs, il est également recommandé de les appeler comme une constante. Je l’ai?

Je sais, c’est beaucoup. J’aime penser aux constantes comme titres de vos actions. Donnez-leur des noms courts et descriptifs avec une convention de dénomination SCREAMING_SNAKE_CASE. Nous allons seulement faire deux choses avec notre état, ajouter et supprimer des articles.

Ensuite, actions.js:

Tout ce que nous faisons ici, ce sont des actions simples qui fournissent des objets. Comme je l’ai dit plus haut, les actions doivent livrer un objet avec un attribut type. Souvent, ils fournissent également des informations. Ces informations sont appelées payload par convention. Nous verrons comment cette charge utile est utilisée dans notre prochaine étape.

reducers.js:

Le réducteur est une fonction qui dicte comment les actions interagiront avec l’état. Il faut deux arguments, l’état et une action pour le changer. Lorsque nous démarrons notre programme et que le réducteur s’exécute pour la première fois, nous fournirons un état initial pour qu’il s’exécute. Un modèle courant consiste à utiliser un switch instruction écrite pour trier les actions en fonction de l’attribut type. Voyez comment tous les petits morceaux se rejoignent?

Une chose importante à retenir est que l’état dans Redux est immuable. Il ne peut pas être modifié, il ne peut être copié et remplacé. Chaque fois que nous envoyons une action, le réducteur examine la action.type et voyez comment le mettre en œuvre. Il changera une partie de l’état et copiera le reste inchangé.

Notre réducteur apportera les modifications suivantes à l’état avant de renvoyer une nouvelle copie:

  • Si le type est ADD_ARTICLE, le réducteur fera une copie de la articles tableau et ajouter le payload à elle.
  • Si le type est DELETE_ARTICLE, notre réducteur filtrera le articles tableau et retourner une copie avec tout ce qui a un identifiant qui ne correspond pas à la payload.

Jusqu’à présent, nous venons de faire des choses avec du JavaScript vanille normal. Rien d’extraordinaire, pas de magie Redux spécifique – juste des chaînes, des objets, des tableaux et un interrupteur. Où, vous demandez-vous, est-ce que Redux entre réellement? Vous verrez dans notre prochain fichier.

store.js:

Et voilà. Je vous ai dit que quelque chose allait apparaître de Redux. Nous utilisons le createStore méthode de la bibliothèque Redux avec notre réducteur comme argument pour créer un magasin, que nous appellerons plutôt de manière créative store.

Notre magasin est l’endroit où notre état est réellement hébergé. Dans deux des workflows que je vais vous montrer, nous utiliserons la bibliothèque d’assistance React Redux pour accéder au magasin, et dans le troisième, nous accèderons à l’état directement à partir du magasin, puis écrivons nos propres crochets personnalisés à livrer à nos composants.

Cela prend en charge notre configuration Redux initiale. Que diriez-vous de configurer nos composants ensuite afin d’avoir quelque chose de beau à regarder?

Close Menu