React.js - useReducer

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

감속기를 사용하시겠습니까?

Este hook guarda y manipula el estado de los componentes, asi es, hace "lo mismo"que useState
라 디페렌시아? 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 .

쿠안도 우살로?

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 편리한 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 uncontraste 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 soncomplementos y no un reemplazo.



useState vs useReducer

Video a manera de recurso y practica visual

하나의 resumida, el codigo para utilizar useReducer 구성 en los siguientes 3 puntos.

1 - 후크 및 구성요소 가져오기

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

count : la 변수, nuestro estado

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

예를 들어, 단락 count podemos tener varias acciones, incrementar, decrementar 등 Ya dependse de nosotros que hacer para hacer ese cambio de estado segun nuestro criterio.

useReducer : es una funcion, esta recibe dos parametros.

El nombre de la funcion que contiene (despacha) los distintos metodos que alteran nuestro estado de una u otra manera

Es el estado inicial de nuestro estado.

2 - La 기능 감속기

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 매개변수.

state : El estado 이니셜

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개의 후크와 구성 요소 사용

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.