Apprendre à connaître le crochet Usereducer React

Le crochet useReducer de React, introduit dans React 16.7.0, fournit un moyen puissant de gérer l'état d'application complexe. Il prend une fonction de réducteur et un état initial, renvoyant l'état actuel et une fonction de répartition. Cela contraste avec useState , qui est mieux adapté à la gestion de l'État plus simple.

Le cœur de useReducer est sa fonction de réducteur, reflétant la méthode reduce de JavaScript. Un réducteur renvoie toujours une seule valeur (nombre, chaîne, tableau ou objet), "réduisant" plusieurs entrées multiples en une seule sortie. Cela le rend idéal pour appliquer la logique à plusieurs valeurs et générer un résultat consolidé.

Par exemple, envisagez de résumer un tableau de nombres:

 Numbers const = [1, 2, 3];
const reducer = (Tally, nombre) => Numéro de décompte;
const total = nombres.reduce (réducteur, 0); // total sera 6

useReducer étend ce concept à la gestion de l'État:

 const [State, Dispatch] = userReducer (Reducer, initialState, init);

Ici, initialState définit l'état d'application initial. La fonction init facultative calcule paresseusement l'état initial, utile lorsque la valeur initiale dépend d'autres facteurs. Le crochet renvoie l' state actuel et une fonction dispatch pour mettre à jour l'état.

Pour illustrer, construisons un personnalisateur de voiture:

Tout d'abord, définissez l'état initial:

 const initialstate = {
  Prix ​​supplémentaire: 0,
  voiture: {
    Prix: 26395,
    Nom: "2019 Ford Mustang",
    Image: "https://cdn.motor1.com/images/mgl/0an2v/s1/2019-ford-mustang-bullitt.jpg",
    caractéristiques: []
  },
  magasin: [
    // ... (liste des fonctionnalités disponibles) ...
  ]]
};

Ensuite, créez la fonction de réducteur pour gérer les fonctionnalités d'ajout et de suppression:

 const reducer = (état, action) => {
  switch (action.type) {
    case "add_feature":
      // ... (logique pour ajouter une fonctionnalité et mettre à jour le prix) ...
      casser;
    case "Remove_Feature":
      // ... (logique pour supprimer une fonctionnalité et mettre à jour le prix) ...
      casser;
    défaut:
      État de retour;
  }
};

Le composant de l'application utiliserait ensuite useReducer pour gérer l'état et répartir les actions en fonction des interactions utilisateur.

Quand choisir useReducer via useState ? useReducer brille lorsque les transitions d'état sont complexes ou lorsqu'un élément d'état dépend d'une autre. Pour un état plus simple, useState est suffisant. Bien que useReducer peut obtenir des fonctionnalités similaires à Redux, Redux propose des fonctionnalités supplémentaires comme le middleware et le débogage du voyage dans le temps qui pourraient être nécessaires pour de très grandes applications. Cependant, pour de nombreux projets, useReducer fournit une solution plus légère et efficace pour gérer l'état complexe.

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!