¿Qué aprenderás de useReducer?

Cómo declararlo.
La forma correcta en que debes inicializar tu state.
Aprenderás a crear tu función reducer.
Haremos un ejemplo donde mediante un clic incrementaremos o disminuiremos el valor de un contador.

Repositorio

Puedes descargar el código dando clic aquí.
O puedes clonar el repositorio y cambiarte a la rama "usereducer".

git clone https://github.com/EWebik/react-js.git
git checkout usereducer

¿Qué es y para qué sirve el Hook useReducer?

El useReducer es un Hook que nos permite manipular el state de nuestros componentes funcionales, esto se logra a través de:

Una función reducer
Y un función de retorno llamada dispatch con la cual podemos combinar o emparejar el state.

UseReducer esta basado en la librería Redux, es por ello que, aparecen las palabras, reducer y dispatch.

¿Cuándo usar el Hook useReducer?

Bien, esto no será una respuesta como tal, ya que, depende del tipo de proyecto, pero, se pueden tomar como recomendaciones para tomar una decisión:

Cuando el estado siguiente del "state" depende del estado anterior.
Cuando manejas un objeto JSON como state y tienes subvalores dentro de tu mismo objeto.
Cuando la lógica es muy compleja.

Declaración de useReducer

En forma general podemos declarar a este Hook de la siguiente forma.

const [state, dispatch] = useReducer(reducer, initialArg, init);

No obstante, la declaración también depende de como decidamos iniciar el state:

Podemos especificar el estado inicial.
O podemos especificar un estado inicial en forma diferida.

Especificando el estado inicial de useReducer

La forma más sencilla de inicializar el state es, especificar el objeto del state y pasarlo como segundo parámetro al useReducer, tal y como lo hacemos en el vídeo.

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

Inicialización del state en forma diferida

Esto no lo ocupamos en el vídeo, pero, no esta de más que conozcas esta opción. Esta forma hace referencia que, usamos todos los argumentos de useReducer, donde:

El primero no cambia, será nuestra función reducer.
El segundo sigue siendo valores iniciales que tendrá nuestro state, sin embargo, no será el valor inicial total de nuestro state.
El tercer parámetro es una función que recibirá el objeto del segundo argumento, aquí construiremos nuestro state final y lo regresaremos.

Creo que debo explicar un poco más ese tercer argumento, simplemente debemos entender que, esta función recibirá como argumento el objeto que se encuentra en el segundo argumento de useReducer, y dentro de esta función, puedes decidir como tomar este dato y agregarlo al state final, esto quiere decir que, puedes tener este objeto más otros datos que requieras agregar al state, por ejemplo:

function init(initState) {
  return {
      ...initState,
      dato:true
  };
}

function Counter({initState}) {
    const [state, dispatch] = useReducer(reducer, initState, init);
   
   ....

}

Si deseas que haga un ejemplo de esto en vídeo, suscríbete a mi canal y déjame un mensaje en los comentarios de este vídeo, si hay muchos comentarios hago un ejemplo de esto.