L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment fonctionnent les réducteurs Redux
l'état vous aurez certainement rencontré des réducteurs. Ce didacticiel expliquera le concept des réducteurs et leur fonctionnement spécifique dans Redux.
Dans ce didacticiel, nous allons découvrir le concept des réducteurs et leur fonctionnement, en particulier dans les applications React. Afin de comprendre et de mieux utiliser Redux, une solide compréhension des réducteurs est essentielle. Les réducteurs permettent de mettre à jour l'état d'une application à l'aide d'une action. Il fait partie intégrante de la bibliothèque Redux.
Ce tutoriel est destiné aux développeurs qui souhaitent en savoir plus sur les Redux Reducers. Une compréhension de React et Redux serait bénéfique. À la fin du didacticiel, vous devriez avoir une meilleure compréhension du rôle que jouent les réducteurs dans Redux. Nous allons écrire des démos de code et une application pour mieux comprendre les Reducers et comment cela affecte l'état d'une application.
Qu'est-ce qu'un Reducer
Un Reducer est une fonction pure qui prend l'état d'une application et d'une action comme arguments et renvoie un nouvel état. Par exemple, un réducteur d'authentification peut prendre un état initial d'une application sous la forme d'un objet vide et une action qui lui indique qu'un utilisateur s'est connecté et a renvoyé un nouvel état d'application avec un utilisateur connecté.
Fonctions pures sont des fonctions qui n'ont pas d'effets secondaires et qui renverront les mêmes résultats si les mêmes arguments sont passés.
Voici un exemple de fonction pure:
const add = (x, y) => x + y;
add (2, 5); L'exemple ci-dessus renvoie une valeur basée sur les entrées, si vous passez 2 et 5 alors vous obtiendrez toujours 10 tant qu'il s'agit de la même entrée, rien d'autre n'affecte la sortie que vous obtenez, c'est un exemple de fonction pure.
Ci-dessous, un exemple de fonction réductrice qui prend un état et une action.
const initialState = {};
const cartReducer = (état = état initial, action) => {
// Faites quelque chose ici
} Définissons les deux paramètres que prend un réducteur, état et action .
État
Un état est la donnée qui votre (vos) composant (s) travaille (s) – il contient les données dont un composant a besoin et il dicte ce qu'un composant rend. Une fois qu'un objet state change, le composant effectue un nouveau rendu. Si un état d'application est géré par Redux, alors le réducteur est l'endroit où les changements d'état se produisent.
Action
Une action est un objet qui contient la charge utile d'informations. Ils sont la seule source d'informations pour le magasin Redux à mettre à jour. Les réducteurs mettent à jour le magasin en fonction de la valeur de action.type . Ici, nous définirons le action.type comme ADD_TO_CART .
Selon la documentation officielle Redux les actions sont les seules choses qui déclenchent des changements dans un Redux application, ils contiennent la charge utile des modifications apportées à un magasin d'applications. Les actions sont des objets JavaScript qui indiquent à Redux le type d'action à effectuer, généralement elles sont définies comme des fonctions comme celle ci-dessous:
const action = {
tapez: 'ADD_TO_CART',
charge utile: {
produit: «margarine»,
quantité: 4
}
} Le code ci-dessus est une valeur de charge utile typique qui contient ce qu'un utilisateur envoie et qui sera utilisée pour mettre à jour l'état de l'application. Comme vous pouvez le voir ci-dessus, l'objet action contient le type d'action et un objet de charge utile qui seraient nécessaires pour que cette action particulière soit exécutée.
Mise à jour de l'état à l'aide de réducteurs
Pour montrer comment les réducteurs fonctionnent, regardons le compteur de nombres ci-dessous:
const augmenterAction = {
tapez: 'AUGMENTER',
};
const diminutionAction = {
type: 'DIMINUER'
};
const countReducer = (état = 0, action) => {
commutateur (action.type) {
CAS AUGMENTATION:
état de retour + 1;
cas DIMINUTION:
état de retour -1;
défaut:
état de retour;
}
}; Dans le code ci-dessus, augmentationAction et diminutionAction sont des actions utilisées dans le réducteur pour déterminer à quoi l'état est mis à jour. Ensuite, nous avons une fonction réductrice appelée countReducer qui prend une action et un état initial dont la valeur est 0 . Si la valeur de action.type est AUGMENTER nous retournons un nouvel état qui est incrémenté de 1, sinon si c'est DIMINUER un nouvel état qui est décrémenté par 1 est renvoyé. Dans les cas où aucune de ces conditions n'est signifiée, nous renvoyons l'état .
Mise à jour de l'état à l'aide de réducteurs: l'opérateur de propagation
L'état ne peut pas être directement modifié, pour créer ou mettre à jour l'état, nous pouvons utilisez l'opérateur de diffusion JavaScript pour vous assurer que nous ne modifions pas directement la valeur de l'état, mais plutôt pour renvoyer un nouvel objet contenant un état qui lui est passé et la charge utile de l'utilisateur.
const contactAction = {
tapez: 'GET_CONTACT',
charge utile: ['0801234567', '0901234567']
};
const initialState = {
contacts: [],
contact: {},
};
fonction d'exportation par défaut (état = état initial, action) {
commutateur (action.type) {
case GET_CONTACTS:
revenir {
...Etat,
contacts: action.payload,
};
défaut:
état de retour;
} Dans le code ci-dessus, nous utilisons un opérateur de propagation pour nous assurer de ne pas changer la valeur de l'état directement, de cette façon nous pouvons renvoyer un nouvel objet qui est rempli avec l'état qui lui est passé et la charge utile qui est envoyé par l'utilisateur. En utilisant un opérateur de diffusion, nous pouvons nous assurer que l'état reste le même que nous y ajoutons tous les nouveaux éléments et également remplacer le champ de contacts dans l'état s'il était présent auparavant.
Redux Reducers In Action – A Demo [19659003] Pour mieux comprendre les Redux Reducers et leur fonctionnement, nous allons implémenter une simple application de recherche de détails de film, le code et la version de travail peuvent être trouvés ici sur Codesandbox . Pour commencer, accédez à votre terminal et initialisez une application de réaction en utilisant la commande ci-dessous: create-react-app movie-detail-finder
create-react-app movie-detail-finder Une fois notre projet initialisé, installons ensuite les packages dont nous aurions besoin pour notre application.
npm i axios reactstrap react-redux redux redux-thunk Une fois les paquets installés, démarrons notre serveur de développement en utilisant la commande:
npm start La commande ci-dessus devrait démarrer notre projet serveur de développement dans notre navigateur. Ensuite, ouvrons notre projet dans l'éditeur de texte de votre choix, dans notre dossier project src supprimons les fichiers suivants: App.css App.test.js , serviceWorker.js et setupTests.js . Ensuite, supprimons tout le code qui fait référence aux fichiers supprimés sur notre App.js .
Pour ce projet, nous utiliserons l'API Open Movie Database pour obtenir les informations, le contenu et les images de notre film pour notre application , ici est un lien vers l'API, vous devrez vous enregistrer et obtenir des clés d'accès afin de l'utiliser pour cette application, une fois que vous avez terminé, poursuivons notre application en construisant des composants. [19659040] Construire des composants d'application
Tout d'abord, à l'intérieur de notre dossier src dans notre répertoire de projet, créez un dossier appelé composants et à l'intérieur du dossier, créons deux dossiers appelés Movie et Barre de recherche notre composant doit ressembler à l'image ci-dessous:
Composant de création de film
Construisons le composant Films qui décrira la structure des détails du film que nous obtiendrons de notre API. Pour ce faire, dans le dossier Movies de notre composant, créez un nouveau fichier Movie.js puis créez un composant basé sur une classe pour les résultats de l'API, faisons-le ci-dessous. [19659046] import React, {Component} de 'react';
importez {Card, CardImg, CardText, CardBody, ListGroup, ListGroupItem, Badge} depuis 'reactstrap';
importer des styles depuis './Movie.module.css';
Le film de classe étend le composant {
rendre(){
if (this.props.movie) {
revenir (
Nom du film: {this.props.movie.Title}
{this.props.movie.Actors}
{this.props.movie.Genre}
{this.props.movie.Year}
{this.props.movie.Writer}
{this.props.movie.imdbRating} / 10
{this.props.movie.Plot}
)
}
retourne null
}
}
Exporter le film par défaut;
Dans le code ci-dessus, Utilisation des composants du package reactstrap vous pouvez consulter la documentation ici . Nous avons créé un composant Carte qui comprend le nom du film, l'image, le genre, l'acteur, l'année, le scénariste, la note et l'intrigue. Pour faciliter la transmission des données de ce composant, nous avons construit des données pour servir d'accessoires à d'autres composants. Ensuite, construisons notre composant Barre de recherche .
Construction de notre composant Barre de recherche
Notre composant Barre de recherche comportera une barre de recherche et un bouton pour rechercher des composants de film, faisons ceci ci-dessous:
import React de 'react';
importer des styles depuis './Searchbar.module.css';
import {connect} de 'react-redux';
import {fetchMovie} de '../../actions';
importer un film depuis '../Movie/Movie';
La barre de recherche de classe étend React.Component {
rendre(){
revenir(
)
}
} Dans le code ci-dessus, nous importons connect depuis react-redux qui est utilisé pour connecter un composant React au magasin Redux, fournit au composant les informations du magasin et fournit également des fonctions utilisées pour distribuer des actions au magasin. Ensuite, nous avons importé le composant Movie et une fonction fetchMovie à partir des actions.
Ensuite, nous avons une balise de formulaire avec une zone de saisie pour saisir les titres de nos films, en utilisant le ] setState hook de React, nous avons ajouté un événement et une valeur onChange qui définiront l'état de title sur la valeur saisie dans la zone de saisie. Nous avons une balise bouton pour rechercher des titres de films et en utilisant le composant Movie que nous avons importé, nous avons transmis les propriétés du composant comme accessoires au résultat de
Ensuite pour nous est d'écrire une fonction pour soumettre notre titre de film à l'API afin de nous envoyer des résultats, nous devons également définir l'état initial de l'application. faisons cela ci-dessous.
La barre de recherche de la classe étend React.Component {
état = {
Titre: ''
}
formHandler = (événement) => {
event.preventDefault ();
this.props.fetchMovie (this.state.title);
this.setState ({titre: ''});
}
Ici, nous définissons l'état initial de l'application sur des chaînes vides, nous avons créé une fonction formHandler qui prend un paramètre d'événement et passe la fonction fetchMovie de l'action et définissant le title comme nouvel état de l'application. Pour compléter notre application, exportons ce composant en utilisant la propriété connect de react-redux pour ce faire nous utiliserons la propriété react redux mapToStateProps pour sélectionner la partie des données notre nécessaire, vous pouvez en savoir plus sur mapToStateProps ici.
const mapStateToProps = (state) => {
retourne {film: state.movie}
}
export default connect (mapStateToProps, {fetchMovie}) (Barre de recherche) Ajoutons des styles à notre formulaire en créant un fichier Searchbar.module.css et en ajoutant les styles ci-dessous:
.Form {
marge: 3rem auto;
largeur: 80%;
hauteur: 100%;
}
contribution{
bloc de visualisation;
hauteur: 45px;
bordure: aucune;
largeur: 100%;
rayon de la frontière: 0,5rem;
contour: aucun;
rembourrage: 0 1rem;
}
input: focus, sélectionnez: focus {
bordure: 2px rgb (16, 204, 179) solide;
}
Bouton .Form {
bloc de visualisation;
arrière-plan: rgb (16, 204, 179);
rembourrage: 0,7rem;
rayon de la frontière: 0,5rem;
largeur: 20%;
margin-top: 0,7rem;
couleur: #FFF;
bordure: aucune;
texte-décoration: aucun;
transition: tous les 0,5 s;
}
bouton: survoler {
opacité: 0,6;
}
@media (largeur maximale: 700px) {
contribution{
hauteur: 40px;
rembourrage: 0 1rem;
}
Bouton .Form {
largeur: 40%;
rembourrage: 0,6rem;
}
} Une fois que nous avons fait ce qui précède, notre composant de barre de recherche devrait ressembler à l'image ci-dessous:
Création d'actions pour l'application
Dans ce composant, nous allons configurer des actions Redux pour notre application. Premièrement, dans le répertoire src créez un dossier nommé actions et à l'intérieur du dossier, nous créerions un fichier index.js . Ici, nous allons créer une fonction fetchMovie qui prend un paramètre de titre et extrait le film de l'API à l'aide d'Axios. Faisons ceci ci-dessous:
import axios depuis 'axios';
export const fetchMovie = (titre) =>
async (répartition) => {
réponse const = attendre
axios.get (
`https://cors-anywhere.herokuapp.com/http://www.omdbapi.com/?t=$ {title} & apikey = APIKEY`);
envoi({
tapez: 'FETCH_MOVIE',
charge utile: response.data
})
} Dans le code ci-dessus, nous avons importé axios et créé une fonction appelée fetchMovie qui prend un paramètre title en utilisant async / await afin que nous peut faire une demande au serveur API. Nous avons une fonction dispatch qui envoie au Redux l'objet action qui lui est passé. À partir de ce que nous avons ci-dessus, nous envoyons une action avec le type FETCH_MOVIE et la charge utile qui contient la réponse que nous avons obtenue de l'API.
REMARQUE: Le apikey dans la demande sera remplacé par votre propre apikey après vous être enregistré sur OmdbAPI .
Création de réducteurs d'application
Dans cette section, nous allons créer des réducteurs pour notre application.
const fetchMovieReducer = (état = null, action) => {
commutateur (action.type) {
case 'FETCH_MOVIE':
retour action.payload;
défaut:
état de retour;
}
}
const rootReducer = (état, action) => {
revenir {
movie: fetchMovieReducer (état, action)
}
}
export default rootReducer; Dans le code ci-dessus, nous avons créé un fetchMovieReducer dont l'état par défaut est null et un paramètre d'action à l'aide d'un commutateur , pour le cas FETCH_MOVIE nous retournerons la valeur de action.payload qui est le film que nous avons obtenu de l'API. Si l'action que nous avons essayé d'effectuer n'est pas dans le réducteur, alors nous retournons notre état par défaut.
Ensuite, nous avons créé une fonction rootReducer qui acceptera l'état actuel et une action comme entrée et renvoie le fetchMovieReducer .
Assemblage
Dans cette section, nous terminerons notre application en créant notre magasin redux dans le index.js faisons-le ci-dessous: [19659011] import React de 'react';
importer ReactDOM depuis 'react-dom';
import {Provider} de 'react-redux';
import {createStore, applyMiddleware} depuis 'redux';
importer le thunk de 'redux-thunk';
importer l'application depuis './App';
import 'bootstrap / dist / css / bootstrap.min.css';
import './index.css';
importer des réducteurs de «./reducers»;
const store = createStore (réducteurs, applyMiddleware (thunk))
ReactDOM.render (
<>
document.getElementById ('racine')
)
Dans le code ci-dessus, nous avons créé l'application store en utilisant la méthode createStore en passant le réducteur que nous avons créé et un middleware. Les middlewares sont des addons qui nous permettent d'améliorer les fonctionnalités de Redux. Nous utilisons ici le middleware Redux Thunk utilisant applyMiddleware . Le middleware Redux Thunk est nécessaire pour que notre boutique effectue des mises à jour asynchrones. Ceci est nécessaire car par défaut, Redux met à jour le magasin de manière synchrone.
Pour nous assurer que notre application connaît le magasin exact à utiliser, nous avons enveloppé notre application dans un composant Provider et avons passé le magasin comme accessoire, ce faisant, d'autres composants de notre application peuvent se connecter et partager des informations avec le magasin.
Ajoutons un peu de style à notre fichier index.css .
* {
marge: 0;
rembourrage: 0;
box-dimensionnement: border-box;
}
corps{
arrière-plan: rgb (15, 10, 34);
couleur: #FFF;
hauteur: 100vh;
largeur max: 100%;
} Rendu et test d'un outil de recherche de détails de film
Dans cette section, nous allons conclure notre application en rendant notre application dans notre App.js pour ce faire, créons une classe- basé sur un composant nommé App et initialisez notre barre de recherche et le champ de saisie.
import React from 'react';
importer la barre de recherche depuis './components/Searchbar/Searchbar';
importer des styles depuis './App.module.css';
class App étend React.Component {
rendre(){
revenir(
Application de recherche de films
Ici, nous avons créé un composant basé sur la classe App avec un h1 qui indique Movie Search App et ajouté notre composant Searchbar . Notre application devrait ressembler à l'image ci-dessous:
Une démo fonctionnelle est disponible sur Codesandbox.
Conclusion
Les réducteurs sont une partie importante de la gestion des états Redux, avec des réducteurs nous pouvons écrire des fonctions pures pour mettre à jour des zones spécifiques de nos applications Redux sans effets secondaires. Nous avons appris les bases des réducteurs Redux, leurs utilisations et le concept de base des réducteurs, de l'état et des arguments.
Vous pouvez aller plus loin en consultant la documentation sur les réducteurs Redux ici . Vous pouvez aller plus loin et développer davantage sur les réducteurs Redux, dites-moi ce que vous construisez.
Ressources
(ks, ra, yk, il) Source link