Como usar o hook useReducer do React

Hoje venho mostrar como usar o hook useReducer do React. Esse hook ele assim como o useState é um gerenciador de estado, porém utilizado para gerenciamentos mais complexos e mais estruturados e é bastante usado com o Redux.

Com o useReducer é possível definir um redutor (reducer) que modificara o estado.

//Sintaxe
const [state, dispatch] = useReducer(reducer, initialArg, init?)

No useReducer passamos três parâmetro, sendo um deles opcional:

state: Gerencia o estado atual.
dispatch: Ela dispara ações para a função reducer que então decide como modificar o estado.
reducer: Será um função pura (é uma função que, para os mesmos argumentos de entrada, sempre retorna o mesmo resultado e não tem efeitos colaterais) que recebe dois parâmetros sendo o estado atual, e uma ação e terá como retorno um novo estado.
initialState: Estado inicial do componente
init?opcional: A função inicializadora que deve retornar o estado inicial. Se não inserido, ele definirá o estado inicial como initialArg. Caso contrário, ele definirá o estado inicial como o resultado da chamada.

Exemplo

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Ação desconhecida.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Incrementar idade
      </button>
      <p>Sua idade é {state.age}.</p>
    </>
  );
}

Acima utilizei um exemplo da própria documentação do useReducer.

Veja como foi feita a função reducer, ela decidirá como o estado será modificado. Nesse caso é acrescentando um valor na idade, mas poderia ter uma outra opção chamada decrement para diminuir a idade.

Quando clicamos no botão, a função de clique dele é chamar o dispatch passando um objeto como parâmetro juntamente com o valor. No nosso caso o objeto se chama type mas pode ser outro nome, porém esse nome é uma convenção já muito utilizada. O dispatch chama a função reducer e a função recebe o valor do objeto para verificar como o estado atualizará, nesse caso aumentará a idade. Não necessariamente o objeto do dispacth precisa ter apenas um valor, podemos adicionar também um height: ‘100cm’. Ficaria assim: dispatch({ type: ‘increment’, height: ‘100cm’ });

O objeto type server para informar ao reducer qual ação ele deverá executar, ou seja, ele é essencial para o controle das operações dentro do reducer.

Caso esteja fazendo uma aplicação na qual o componente se tornou muito complexo pois conta com uma logica de atualização ou vários valores. Utilizar o useReducer ajudará bastante e deixará seu código mais limpo.

Referências: react.dev
Leia: O que são Hooks do React e como usa-los – FrontMaster