Extraindo lógica de estado em um redutor
Componentes com muitas atualizações de estado espalhadas por muitos manipuladores de
eventos podem ficar sobrecarregados. Para esses casos, você pode consolidar toda a lógica de
atualização de estado fora do componente em uma única função, chamada de redutor.
Você vai aprender
● O que é uma função redutora
● Como refatorar useState to useReducer
● Quando usar um redutor
● Como escrever bem um
Consolidar a lógica de estado com um redutor
À medida que seus componentes crescem em complexidade, pode ficar mais difícil ver
rapidamente todas as diferentes maneiras pelas quais o estado de um componente é atualizado.
Por exemplo o componente TaskApp abaixo contém uma matriz de tasks no estado e usa três
manipuladores de eventos diferentes para adicionar, remover e editar tarefas:
Cada um de seus manipuladores de eventos chama setTasks para atualizar o estado. À medida
que esse componente cresce, cresce também a quantidade de lógica de estado espalhada por ele.
Para reduzir essa complexidade e manter toda a sua lógica em um local de fácil acesso, Você
pode mover essa lógica de estado para uma única função fora do componente, called a “reducer”.
Redutores são uma maneira diferente de lidar com o estado. Você pode migrar de useState para
useReducer em três passos:
1. Passar da definição de estado para o envio de ações.
2. Escreva uma função redutora.
3. Use o reducer do seu componente.
Etapa 1: Passar da configuração de estado para a expedição de
ações
Seus manipuladores de eventos atualmente especificam o que fazer definindo o estado:
Remova toda a lógica de configuração de estado. O que resta são três manipuladores de eventos:
● handleAddTask(text) é chamado quando o usuário pressiona “Add”.
● handleChangeTask(task) é chamado quando o usuário alterna uma tarefa ou
pressionado “Save”.
● handleDeleteTask(taskId) é chamado quando o usuário pressiona “Delete”.
O gerenciamento de estado com reducers é ligeiramente diferente de definir diretamente o estado.
Em vez de dizer ao React "o que fazer" definindo o estado, você especifica "o que o usuário acabou
de fazer" despachando "ações" de seus manipuladores de eventos. (A lógica de atualização de
estado viverá em outro lugar!) Assim, em vez de "ambiente tasks” através de um event handler,
você está despachando uma ação “added/changed/deleted a task”. Isso é mais descritivo da
intenção do usuário.
O objeto para o qual você passa dispatch é chamado de “action”:
É um objeto JavaScript regular. Você decide o que colocar nele, mas geralmente deve conter o
mínimo de informações sobre o que aconteceu. (Você adicionará a function dispatch em um
passo posterior.)
Etapa 2: Escrever uma função redutora
Uma função redutora é onde você colocará sua lógica de estado. Ele usa dois argumentos, o
estado atual e o objeto de ação, e retorna o próximo estado:
O React definirá o estado para o que você retornar do redutor.
Para mover a lógica de configuração de estado dos manipuladores de eventos para uma função
redutora neste exemplo, você irá:
O React definirá o estado para o que você retornar do redutor.
Para mover a lógica de configuração de estado dos manipuladores de eventos para uma função
redutora neste exemplo, você irá:
1. Declarar o estado atual (tasks) como primeiro argumento.
2. Declare o objeto action como segundo argumento.
3. Retornar o próximo estado do redutor (qual React definirá o estado para).
Aqui está toda a lógica de configuração de estado migrada para uma função redutora: