Comment utiliser useReducer

Mon GitHub

useReducerIl s'agit d'un Hook dans React, utilisé pour gérer la logique d'état complexe des composants. Contrairement à useState, useReducervous permet de gérer plusieurs champs d'état d'un composant de manière plus prévisible.

Utilisation de base

useReducerAccepte une reducerfonction et un état initial comme paramètres et renvoie un dispatchtableau contenant l'état actuel et une méthode. reducerLa fonction prend l'état actuel et a actionet renvoie un nouvel état.

Voici un contre-exemple simple :

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

paramètre

1. reducer: Il s'agit d'une fonction pure qui accepte l'état actuel et un objet d'action et renvoie un nouvel état.
2. initialState: C'est reducerl'état initial de .
3. init: (facultatif) Si elle est fournie, cette fonction acceptera initialStatecomme argument et renverra la valeur de l'état initial.

valeur de retour

useReducerRenvoie un tableau contenant deux éléments :

1. state: Statut actuel.
2. dispatch: Il s'agit d'une méthode utilisée pour déclencher reducerune action.

Action

Une action est généralement un typeobjet doté d'une propriété qui décrit ce qui s'est passé et d'une payloadpropriété qui contient toutes les informations nécessaires pour mettre à jour l'état. Mais en réalité, une action peut être n’importe quelle valeur (comme une chaîne, un nombre ou un objet).

Quand utiliseruseReducer

• Lorsque vous devez gérer plusieurs champs de statut interdépendants.
• Lorsque vous devez gérer une logique d'état complexe qui contient plusieurs sous-valeurs ou que l'état suivant dépend de l'état précédent.
• Lorsque vous devez suivre explicitement la source d'un changement d'état, comme l'implémentation de la fonctionnalité d'annulation/rétablissement.

Dans l’ensemble, useReduceril offre un moyen plus puissant et plus prévisible de gérer l’état des composants.

Donnez un exemple que usestate ne peut pas faire mais que usereducer peut faire

useReducerCeci est généralement plus approprié lorsque vous disposez de plusieurs champs de statut interdépendants et que la logique de mise à jour du statut est assez complexe . Prenons l'exemple d'un composant de panier d'achat avec plusieurs champs de statut : liste d'articles, prix total, remise, etc. Ces champs peuvent dépendre du statut d'autres champs.

import React, { useReducer } from "react";

const initialState = {
  items: [], // 商品列表
  total: 0,  // 总价
  discount: 0 // 折扣
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      const newItems = [...state.items, action.item];
      const newTotal = newItems.reduce((acc, item) => acc + item.price, 0);
      return {
        ...state,
        items: newItems,
        total: newTotal
      };
    case "APPLY_DISCOUNT":
      return {
        ...state,
        discount: action.discount,
        total: state.total * (1 - action.discount / 100)
      };
    default:
      return state;
  }
};

function ShoppingCart() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const addItem = (item) => {
    dispatch({ type: "ADD_ITEM", item });
  };

  const applyDiscount = (discount) => {
    dispatch({ type: "APPLY_DISCOUNT", discount });
  };

  return (
    <div>
      <h1>Shopping Cart</h1>
      {/* 商品列表和添加商品操作 */}
      {/* ... */}
      <button onClick={() => addItem({ name: "Apple", price: 1 })}>
        Add Apple
      </button>
      {/* 显示总价 */}
      <p>Total: ${state.total}</p>
      {/* 应用折扣 */}
      <button onClick={() => applyDiscount(10)}>Apply 10% Discount</button>
    </div>
  );
}

Dans cet exemple, lorsque vous ajoutez un article ( ADD_ITEM), non seulement itemsson statut change total(le prix total) doit également être mis à jour. Lorsqu'une réduction ( APPLY_DISCOUNT) est appliquée, discountles deux totalet doivent être mis à jour.

Si utilisé useState, vous devez synchroniser manuellement ces états, ce qui rend le code plus difficile à gérer et à déboguer. En utilisant useReducer, vous pouvez regrouper toute la logique pertinente au même endroit, rendant les mises à jour d'état plus prévisibles et plus faciles à maintenir.