Comment commencer avec le redux?
Créez un dossier séparé à l'emplacement souhaité et ouvrez la fenêtre du terminal.
Après avoir exécuté avec succès la commande mentionnée ci-dessus, vous verrez différents dossiers sur la barre latérale de notre écran Visual Studio.
Ici, vous pouvez voir un dossier nommé SRC; Supprimer tous les fichiers présents dans ce dossier SRC. De plus, veuillez faire un nouveau fichier et le noms index avec l'extension de js tout à fait indice.js. Après avoir créé ce nouveau fichier, ouvrez le terminal et écrivez la commande suivante.
Comme vous pouvez le voir dans l'extrait ci-dessus, le Node Package Manager (NPM) installera la boîte à outils Redux dans notre projet d'application React en utilisant la commande d'installation.
Nous avons maintenant créé notre application React et nous sommes également réalisés avec l'installation de la boîte à outils Redux. Il est temps de définir nos composants redux dans ce projet d'application React.
Donc, tout d'abord, mettons en place le magasin de notre redux. Donc, pour cela, nous devrons importer le
configurestore fonction de redux.
Habituellement, nous utilisons le Createstore fonction intégrée pour créer le magasin, mais configurestore est un moyen amélioré de créer le magasin, nous allons donc créer notre magasin en utilisant le configurestore fonction. La syntaxe est
import configurestore à partir de 'redux';
Maintenant, nous allons définir le deuxième composant le plus composé de Redux I-E, réducteur. Comme nous le savons, il prend l'état actuel et effectue une action ou un événement, alors nous allons maintenant définir la fonction du réducteur.
Magasin La fonction doit être mise à jour chaque fois que le réducteur agit sur un état. À chaque action que le réducteur effectue, nous savons que l'état actuel se transformera en un état mis à jour. Pour mettre à jour les valeurs de l'état du magasin, nous devons utiliser la fonction d'abonnement du magasin.
L'extrait de code ci-dessus explique comment nous pouvons définir notre magasin et notre réducteur pour le redux avec la description. Si vous exécutez le code ci-dessus à l'aide du début du NPM de commande, vous verrez le message réducteur affiché sur l'écran de votre console.
Maintenant, comme nous avons exécuté notre magasin et notre réducteur, vérifions si le magasin est mis à jour chaque fois que le réducteur effectue un événement ou une action dans son état actuel. Donc, pour cela, nous devons envoyer une action.
Chaque action peut ou non avoir un type différent, mais l'action doit avoir un type. C'est comme que nous voulons effectuer quelque chose avec un but significatif. Le type d'action peut être incrément_number, décrément_number, add_user, delete_records, etc.
Nous avons mis à jour notre code avec la répartition de nos actions du magasin au réducteur. Le réducteur effectuera ces actions sur l'état actuel et renverra l'état mis à jour. Plus tard, la fonction d'abonnement aidera le magasin à mettre à jour les valeurs d'état dans le magasin pour une utilisation future.
Vous pouvez voir dans l'extrait ci-dessus que le réducteur a effectué l'action du nombre d'incrément à l'état = 0 et a renvoyé l'état = 1, le magasin a mis à jour cette réponse du réducteur. Lors de l'envoi de l'autre action avec une augmentation du nombre, le réducteur a de nouveau augmenté dans l'État et l'a fait état = 2. Lorsqu'il est effectué par le réducteur dans les résultats, la dernière action répartie de la diminution du nombre met à jour l'état de l'état = 2 à l'état = 1.
Conclusion
Dans cet article, créez une application de réaction simple pour commencer par le redux. Le code Visual Studio est utilisé pour créer l'application. Cet article démontre un code simple qui exerce Redux. Le Node Package Manager (NPM) installe la boîte à outils Redux dans notre projet d'application React en utilisant la commande d'installation. Par conséquent, vous pouvez le pratiquer et faire d'autres expériences pour votre propre apprentissage.