Este o quinto artigo de uma srie de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programao.

O useReducer um hook do React que permite gerenciar o estado de um componente de forma semelhante ao reducer do Redux.

O useReducer til quando voc precisa gerenciar um estado mais complexo ou compartilhado por vrios componentes em sua aplicao. Ele tambm pode ser uma alternativa mais eficiente ao useState em casos em que o estado depende de valores anteriores, pois o useReducer s requer que voc fornea o prximo estado, em vez de todo o estado atual.

O primeiro parmetro do useReducer o reducer, que uma funo que recebe o estado atual e uma ao como entrada e retorna o prximo estado. O reducer responsvel por atualizar o estado de acordo com a ao fornecida. Ele geralmente escrito como um switch statement que verifica o tipo da ao e retorna o prximo estado de acordo com a ao correspondente.

O segundo parmetro do useReducer o estado inicial, que o valor inicial do estado do componente. Ele passado como o primeiro argumento para o reducer quando o componente montado pela primeira vez. Ao chamar o useReducer, o hook retorna um par de valores: o estado atual e a funo de dispatch. O estado atual o valor atual do estado do componente, que atualizado pelo reducer sempre que uma ao despachada. A funo de dispatch usada para despachar uma ao para o reducer, o que atualiza o estado do componente.

Empregos do useReducer

Entenda o funcionamento do react hook useReducer com os exemplos abaixo.

1. Contador com useReducer

Acompanhe abaixo no arquivo Files>src>App.jsx o exemplo de um contador simples sobre o uso desse hook:

1 - import { useReducer } from "react": este comando importa o hook useReducer do mdulo react.
2 - function reducer(state, action): esta uma funo chamada reducer, que recebe dois argumentos: state e action.
3 - switch (action.type): neste trecho, o valor do atributo type da ao usado para escolher qual ao ser realizada.
4 - case "increment": se o valor do atributo type da ao for "increment", ser executado o cdigo abaixo deste case.
5 - return { count: state.count + 1 }: este comando retorna um novo objeto com o valor de count incrementado em 1 em relao ao valor atual.
6 - case "decrement": se o valor do atributo type da ao for "decrement", ser executado o cdigo abaixo deste case.
7 - return { count: state.count - 1 }: este comando retorna um novo objeto com o valor de count decrementado em 1 em relao ao valor atual.
8 - default: se o valor do atributo type da ao no for reconhecido pelos cases acima, ser executado o cdigo abaixo deste default.
9 - throw new Error(): este comando lana uma exceo, interrompendo a execuo do cdigo.
10 - function Counter(): esta uma funo que retorna um componente do React.
11 - const [state, dispatch] = useReducer(reducer, { count: 0 }): este comando usa o hook useReducer para gerenciar o estado do componente. O primeiro argumento o reducer definido anteriormente, e o segundo o estado inicial, um objeto com o valor de count igual a 0. O useReducer retorna um array com dois elementos: o primeiro o estado atual, e o segundo uma funo chamada dispatch, que permite disparar uma ao para o reducer.
12 - dispatch({ type: "increment" })}>+: este um boto que, quando clicado, dispara uma ao de tipo "increment" para o reducer usando a funo dispatch.
13 - dispatch({ type: "decrement" })}>-: este um boto que, quando clicado, dispara uma ao de tipo "decrement" para o reducer usando a funo dispatch.

2. Hook useReducer aplicado lista de tarefas

No exemplo abaixo, o componente Files>src>App.jsx exibe uma lista de tarefas, um formulrio para adicionar novas tarefas e botes para marcar tarefas como concludas ou remov-las. Acompanhe:

1 - React e useReducer so importados do pacote react.
2 - initialState uma constante que armazena um array vazio, que ser o estado inicial do componente.
3 - reducer uma funo que recebe o estado atual e uma ao como argumentos e retorna um novo estado. Ela possui um switch case com trs casos possveis, correspondentes s aes "ADD_TASK", "TOGGLE_TASK" e "REMOVE_TASK".
4 - TaskList uma funo que retorna um componente React. Ela utiliza o hook useReducer para gerenciar o estado do componente, passando como primeiro argumento a funo reducer e como segundo argumento o estado inicial, armazenado na constante initialState.
5 - handleSubmit uma funo que chamada quando o formulrio submetido. Ela previne o comportamento padro de recarregar a pgina e envia uma ao do tipo "ADD_TASK" com o texto digitado no campo de input como payload. Ela tambm limpa o campo de input.
6 - handleToggleTask uma funo que chamada quando o checkbox de uma tarefa clicado. Ela envia uma ao do tipo "TOGGLE_TASK" com o id da tarefa como payload.
7 - handleRemoveTask uma funo que chamada quando o boto "Remove" de uma tarefa clicado. Ela envia uma ao do tipo "REMOVE_TASK" com o id da tarefa como payload.
8 - O componente retornado com um formulrio para adicionar uma nova tarefa, uma lista de tarefas e, para cada tarefa, um checkbox para marcar como concluda e um boto para remover. Cada tarefa possui o texto da descrio e o id como chave nica.
9 - O componente exportado para que possa ser utilizado em outros arquivos.

3. Hook useReducer em Formulrio de Nome/E-mail

Outro exemplo para compreendermos o useReducer no caso em que precisamos manipular os dados de um formulrio em nosso aplicativo. O reducer define o que acontece com o estado quando as aes so emitidas e usamos o gancho para controlar o estado inicial. Depois, temos campos de entrada que emitem aes para o nosso reducer e um boto de redefinio para redefinir os dados do formulrio. Veja em Files>src>App.jsx:

1 - import React, { useReducer } from 'react';: Essa linha importa o React e o hook useReducer do pacote react.
2 - const initialState = { formData: { name: '', email: '' } };: Essa constante define o estado inicial do componente como um objeto que contm um objeto aninhado chamado formData, que, por sua vez, contm os campos de formulrio name e email inicializados como strings vazias.
3 - function reducer(state, action) { ... }: Essa funo o reducer que ser usado pelo hook useReducer. Ele recebe dois argumentos: o estado atual e uma ao. A funo verifica o tipo de ao e, em seguida, retorna um novo estado de acordo.
4 - const [state, dispatch] = useReducer(reducer, initialState);: Essa linha usa o hook useReducer para gerenciar o estado do componente. Ela recebe dois argumentos: o reducer e o estado inicial. Em seguida, ela desestrutura o valor retornado pelo hook em duas variveis: o estado atual e uma funo chamada dispatch, que pode ser usada para enviar aes para o reducer.
5 - const handleUpdateFormData = formData => dispatch({ type: 'UPDATE_FORM_DATA', formData });: Essa funo um manipulador de eventos que chamado quando os campos de formulrio so alterados. Ele recebe um objeto formData como argumento e usa a funo dispatch para enviar uma ao do tipo UPDATE_FORM_DATA para o reducer, passando o objeto formData como um segundo argumento.
6 - const handleResetFormData = () => dispatch({ type: 'RESET_FORM_DATA'});: Essa funo um manipulador de eventos que chamado quando o boto "Reset" clicado. Ele usa a funo dispatch para enviar uma ao do tipo RESET_FORM_DATA para o reducer.
7 - <form>: Essa a tag principal do formulrio.
8 - <input type="text" name="name" value={state.formData.name} placeholder="Enter Your Name" onChange={e => handleUpdateFormData({[e.target.name]: e.target.value })} />: Essa uma entrada de texto para o campo de nome. Ela recebe o valor atual do campo de nome doestado atravs da propriedade value, e usa o manipulador de eventos handleUpdateFormData para atualizar o estado quando o campo alterado.
9 - handleUpdateFormData({ [e.target.name]: e.target.value })} />: este um elemento de entrada HTML que representa um campo de formulrio para o usurio inserir o endereo de e-mail. Quando o usurio digita um valor no campo, a funo handleUpdateFormData chamada para atualizar os dados do formulrio.
10 - Reset: este um elemento de boto HTML que tem um evento onClick que chama a funo handleResetFormData quando o boto clicado. Isso faz com que os dados do formulrio sejam redefinidos para seus valores iniciais.
11 - export default App;: este cdigo exporta o componente App para que ele possa ser usado em outros arquivos.

4. Formulrio de busca com useReducer

Neste exemplo, testaremos o hook useReducer em um componente de formulrio de busca. Acompanhe pelo Files>src>App.jsx:

1 - import React, { useReducer } from 'react';: Importa o mdulo react e a funo useReducer do mdulo react.
2 - import './App.css': Importa o arquivo de estilos App.css para o componente App.
3 - const initialState = { query: '', results: [] };: Define o estado inicial do componente App, contendo um objeto com as propriedades query e results. A propriedade query armazena a string de pesquisa atual, enquanto a propriedade results armazena os resultados da pesquisa.
4 - const reducer = (state, action) => {...}: Define uma funo reducer que recebe um estado atual e uma ao e retorna um novo estado. A funo reducer usada pelo useReducer para atualizar o estado do componente.
5 - const App = () => {...}: Define o componente App como uma funo.
6 - const [state, dispatch] = useReducer(reducer, initialState);: Chama a funo useReducer passando a funo reducer e o estado inicial como argumentos. A funo useReducer retorna um array com o estado atual e uma funo dispatch que pode ser usada para disparar aes para a funo reducer. O estado atual armazenado na varivel state, enquanto a funo dispatch armazenada na varivel dispatch.
7 - const handleInputChange = e => {...};: Define uma funo handleInputChange que chamada toda vez que o usurio altera o valor do input de pesquisa. A funo dispara uma ao UPDATE_QUERY para a funo reducer, passando o valor atual do input como argumento.
8 - const handleSearch = () => {...};: Define uma funo handleSearch que chamada toda vez que o usurio clica no boto "Search". A funo simula uma chamada a uma API, gerando alguns resultados de pesquisa fictcios e disparando uma ao UPDATE_RESULTS para a funo reducer, passando os resultados como argumento.
9 - const handleReset = () => {...};: Define uma funo handleReset que chamada toda vez que o usurio clica no boto "Reset". A funo dispara uma ao RESET para a funo reducer, reinicializando o estado do componente para o estado inicial.
10 - return (...): Retorna o elemento JSX que representa o componente App. O elemento inclui um input de texto que exibe o valor da propriedade query do estado atual e chama a funo handleInputChange toda vez que o valor alterado. Tambm inclui dois botes que chamam as funes handleSearch e handleReset quando clicados. Por fim, o elemento inclui um conjunto de elementos div que exibem os resultados da pesquisa armazenados na propriedade results do estado atual.

Concluso

O useReducer um hook do React que permite que um componente gerencie seu prprio estado de maneira semelhante ao padro reducer de uma aplicao Redux.

Ao invs de armazenar o estado diretamente no componente, o estado armazenado em uma funo reducer, que toma o estado atual e uma ao como argumentos e retorna o prximo estado da aplicao. Isso permite que a lgica de atualizao do estado seja centralizada e facilita o gerenciamento de mudanas de estado complexas em componentes.

Alm disso, o uso do useReducer pode tornar o cdigo mais legvel, pois a lgica de atualizao do estado isolada em uma nica funo, em vez de espalhada por todo o componente.

No entanto, importante lembrar de que o useReducer no a soluo ideal para todos os casos e deve ser usado com moderao, considerando as necessidades especficas da sua aplicao.

marcelopetry.com