Cómo utilizar useReducer

Mi GitHub

useReducerEs un Hook en React, que se utiliza para manejar la lógica de estado compleja de los componentes. A diferencia de useState, useReducerle permite administrar múltiples campos de estado de un componente de una manera más predecible.

Uso básico

useReducerAcepta una reducerfunción y un estado inicial como parámetros y devuelve una dispatchmatriz que contiene el estado actual y un método. reducerLa función toma el estado actual y a actiony devuelve un nuevo estado.

Aquí hay un ejemplo de contador 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>
    </>
  );
}

parámetro

1. reducer: Esta es una función pura que acepta el estado actual y un objeto de acción y devuelve un nuevo estado.
2. initialState: Este es reducerel estado inicial de .
3. init: (opcional) Si se proporciona, esta función aceptará initialStatecomo argumento y devolverá el valor del estado inicial.

valor de retorno

useReducerDevuelve una matriz que contiene dos elementos:

1. state: Estado actual.
2. dispatch: Este es un método utilizado para desencadenar reduceruna acción.

Acción

Una acción suele ser un typeobjeto con una propiedad que describe lo que sucedió y una payloadpropiedad que contiene la información necesaria para actualizar el estado. Pero en realidad, una acción puede tener cualquier valor (como una cadena, un número u un objeto).

Cuándo usaruseReducer

• Cuando necesita manejar múltiples campos de estado interrelacionados.
• Cuando necesita lidiar con una lógica de estado compleja que contiene múltiples subvalores o el siguiente estado depende del estado anterior.
• Cuando necesita realizar un seguimiento explícito del origen de un cambio de estado, como la implementación de la funcionalidad deshacer/rehacer.

En general, useReducerproporciona una forma más potente y predecible de gestionar el estado de los componentes.

Dé un ejemplo que usestate no pueda hacer pero usereducer sí.

useReducerEsto suele ser más apropiado cuando tiene varios campos de estado interdependientes y la lógica de actualización de estado es bastante compleja . Considere el ejemplo de un componente de carrito de compras con múltiples campos de estado: lista de artículos, precio total, descuento, etc. Estos campos pueden depender del estado de otros campos.

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>
  );
}

En este ejemplo, cuando agrega un artículo ( ADD_ITEM), no solo itemscambia el estado, totalsino que también es necesario actualizar (precio total). Cuando se aplica un descuento ( APPLY_DISCOUNT), discountambos totaly deben actualizarse.

Si se usa useState, debe sincronizar manualmente estos estados, lo que hace que el código sea más difícil de administrar y depurar. Al utilizar useReducer, puede colocar toda la lógica relevante en un solo lugar, lo que hace que las actualizaciones de estado sean más predecibles y fáciles de mantener.