Comment utiliser la tranche dans react-redux

Aperçu

Lorsque j'ai commencé à utiliser redux dans React, j'ai pensé que c'était un peu exagéré pour une application Web idéale. Je devais gérer plusieurs fichiers pour chaque module. Il y avait tellement de code qui était presque le même et devait l'écrire pour chaque module, et j'ai toujours pensé que si nous devions de toute façon écrire le même code à plusieurs reprises, pourquoi n'était-il pas géré par redux ? Quand j'ai entendu parler de createSlice, j'ai senti que mes prières étaient enfin entendues.

Qu'est-ce que createSlice

createSlice est fourni avec le package redux-toolkit . C'est une fonction qui accepte un état initial, un objet plein de fonctions de réduction et un « nom de tranche », et génère automatiquement des créateurs d'action et des types d'action qui correspondent aux réducteurs et à l'état.

Comment createSlice fonctionne ?

1. Créez un magasin Redux avec configureStore
   a. configureStore accepte une fonction de réduction comme argument nommé
   b . configureStore configure automatiquement le magasin avec de bons paramètres par défaut
2. Fournir le magasin Redux aux composants de l'application React
   a. Mettez un composant React-Redux <Provider> autour de votre <App />
   b. Passez le magasin Redux en tant que <Provider store={store}>
3. Créez un réducteur de « tranche » Redux avec createSlice
   a. Appelez createSlice avec un nom de chaîne, un état initial et des fonctions de réduction nommées
   b. Les fonctions de réduction peuvent « muter » l'état en utilisant Immer
   c. Exporter le réducteur de tranches et les créateurs d'action générés
4. Utilisez les hooks React-Redux useSelector/useDispatch dans les composants React
   a. Lire les données du magasin avec le crochet useSelector
   b. Obtenez la fonction de répartition avec le hook useDispatch et les actions de répartition selon les besoins

Mon dossier src ressemble à ceci

Tout d'abord, créez une tranche de module à l'aide de createSlice. Dans l'attribut reducers de la fonction createSlice, ajoutez des fonctions qui contiendront la logique métier/domaine.

Exportez le réducteur que vous obtiendrez de l'instance de Slice.

Importez le réducteur et transmettez-le dans le réducteur de magasin global lors de la création du magasin à l'aide de configureStore.

Maintenant que vous avez un magasin prêt, vous pouvez l'utiliser dans votre application en le transmettant à un fournisseur et en encapsulant le composant racine de l'application par ce fournisseur.

Le fournisseur rendra le magasin disponible pour chaque composant à tous les niveaux du composant App. Maintenant, nous allons utiliser le magasin dans le composant Counter. Tout d'abord, vous devrez obtenir la valeur du magasin à l'aide du crochet useSelector

Nous pouvons utiliser cette variable de comptage directement pour afficher le nombre. Maintenant, nous allons mettre à jour le magasin et pour cela, nous aurons besoin d'une action pouvant être exportée à partir de l'instance de tranche.

Importez ces actions dans le composant et distribuez l'action souhaitée à l'aide de la fonction hook useDispatch. La fonction useDispatch renvoie une instance du type Dispatch.

C'est ça! Vous pouvez voir comment Slice crée des réducteurs et des actions pour nous, ce qui prend moins de temps et moins de code par rapport à l'architecture Redux traditionnelle. Nous savons maintenant créer une boutique, utiliser les données pour afficher et mettre à jour les données. C'était l'exemple le plus basique pour que tout le monde puisse comprendre l'utilisation de Slice dans ReactJS.

Si vous souhaitez en savoir plus sur React, Redux ou Slice, faites-le moi savoir dans les commentaires.

Ici pour rendre la communauté plus forte en partageant les connaissances. Suivez moi et mon équipe pour savoir ce que nous construisons secrètement 😉.