React.js - useReducer

Nota: Entrada para quienes no hayan tocado una sola linea de codigo/teoria de lo que hace el hook useReducer

useReducer?

Este hook guarda y manipula el estado de los componentes, asi es, hace "lo mismo" que useState

La diferencia? useReducer permite manipular los estados de manera global en la aplicacion y relacionar los estados para que se relacionen entre si, para que puedan reaccionar dependiendo del cambio de uno u otro estado del sistema entero. Cosa que no se puede hacer con useState.

Cuando usarlo?

Si el proyecto es muy grande, useReducer. No es el hecho de tener un proyecto "grande", si no que al momento de codificar los requerimientos, posiblemente tengas muchos estados en los componentes (y no esta mal), el problema seria tener estados independientes el uno del otro (useState) cuando en realidad trabajan en conjunto para realizar x o y accion en el sistema (como mostrar una pantalla en especifico). En ese caso caso es muy conveniente useReducer. Si no es el caso, se puede utilizar con toda libertad el hook basico de useState.

Para la parte practica con codigo. Platzi tiene una entrada que explica perfectamente como utilizar useReducer y un contraste de hacer el codigo usando useState, para ver esas diferencias a nivel de desarrollo que nos abren los ojos para decidir cual usar, recordar que estos hooks son complementos y no un reemplazo.

useState vs useReducer

Video a manera de recurso y practica visual

A manera resumida, el codigo para utilizar useReducer consiste en los siguientes 3 puntos.

1 - importar el hook al componente

const [count,dispatch] = useReducer(reducer,0);

• count: la variable, nuestro estado

• dispatch: es un metodo que recibe como parametro la accion que queremos ejecutar para modificar ese state.

Por ejemplo, para count podemos tener varias acciones, incrementar, decrementar, etc. Ya depende de nosotros que hacer para hacer ese cambio de estado segun nuestro criterio.

• useReducer: es una funcion, esta recibe dos parametros.

1. El nombre de la funcion que contiene (despacha) los distintos metodos que alteran nuestro estado de una u otra manera
2. Es el estado inicial de nuestro estado.

2 - La funcion reducer

function reducer(state,action){
 switch(action.type){
  case 'increment':
  /* blablabla */ 
  return state+=1; 

  case 'decrement':
  /* blablabla */ 
  return state-=1; 
 }
}

Este codigo se almacena en un archivo js distinto a los componentes, la finalidad es poder reutilizarlo en cualquier otro componente.

La funcion recibe 2 parametros.

1. state: El estado inicial
2. action: Un objeto. Este objeto contiene los metodos despachadores que se puede ejecutar para alterar el estado

Dentro de la funcion se encuentra un switch del objeto recibido como 2do parametro. Esto ayudara a ejecutar las acciones pertinentes para mutar el estado.

3 usar el hook en el componente

Una vez realizados los puntos 1 & 2, es momento de usarlo en el jsx. (O donde deses)

<button onClick={()=>{dispatch({type:'increment'})}></button>

El metodo dispatch (al que se hizo array destructuring) se ejecuta al momento de que suceda algun evento dentro del DOM. Este metodo recibe como parametro un objeto con la propiedad type que indica cual sera el codigo a ejecutar para mutar el estado.