Etiqueta: usereducer

useReducer es una función de React Hooks que te permite manejar el estado de tu aplicación de manera similar a como lo harías con un reducer en una aplicación Redux. A diferencia de useState, que sólo te permite guardar y actualizar un único valor de estado, useReducer te permite manejar estado complejo y encapsular la lógica relacionada con ese estado en un solo lugar.

useReducer toma dos argumentos: el primer argumento es una función reducer y el segundo argumento es el estado inicial. La función reducer toma el estado actual y una acción, y devuelve el nuevo estado. El estado inicial es el valor inicial que se usará cuando se monta el componente.

Aquí hay un ejemplo de un componente de React que utiliza useReducer para manejar el estado de un contador:

import { useReducer } from 'react';

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, { count: 0 });

  return (
    <>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

En este ejemplo, el componente Counter utiliza la función useReducer para inicializar el estado con un objeto { count: 0 }. Luego, el componente utiliza unos botones para incrementar o decrementar el contador. Cada vez que el usuario hace clic en un botón, el componente llama a dispatch con una acción específica, que es manejada por el reducer para actualizar el estado. El estado actualizado es entonces pasado al componente para renderizar.

Al igual que useState, useReducer devuelve un par de valores, el estado actual y una función dispatch para actualizarlo. Al tener toda la lógica relacionada con el estado en un solo lugar, es más fácil entender cómo se actualiza el estado y resolver cualquier problema relacionado con eso.

useReducer es útil en aplicaciones de React de mayor tamaño y complejidad, ya que te permite manejar estado complejo y encapsular la lógica relacionada con este.

https://www.w3schools.com/react/react_usereducer.asp
https://beta.reactjs.org/reference/react/useReducer
https://ewebik.com/react-js/usereducer
https://developero.medium.com/react-hooks-usereducer-4d7b68ce22e2
https://devtrium.com/posts/how-to-use-react-usereducer-hook