Aula 40
Adicionamos case para CHANGE_POST_ERROR e definimos changePostError action creator
Summary
# Resumo do Transcript
O segmento discute a implementação de um action creator para lidar com erros em um formulário. A seguir, as principais ideias abordadas:
1. **Objetivo**: Capturar o valor do erro e do campo (title ou body) em um action creator ao chamar `postCreator`.
2. **Estrutura do Payload**:
- O payload será um objeto contendo duas propriedades:
- `field`: O nome do campo que apresentou erro (ex: title ou body).
- `error`: A descrição do erro que ocorreu.
3. **Acesso às Propriedades do Payload**:
- Para acessar o erro e o campo de maneira mais limpa, as propriedades podem ser extraídas do `action.payload`, evitando a repetição de `action.payload` a cada uso.
4. **Uso da Interpolação de Strings**:
- A interpolação de strings (usando backticks) é sugerida para formatar a mensagem de erro de forma mais legível (ex: `title error`, `body error`).
5. **Mudanças no Estado**:
- Ao modificar o estado, duas novas propriedades são adicionadas: `title error` e `body error`, que armazenam a descrição do erro se houver um problema no formulário.
6. **Criação do Action Creator**:
- Um novo action creator chamado `changePostError` é introduzido, recebendo dois parâmetros (campo e erro) e retornando um objeto de ação com um tipo (`type`) e um payload.
7. **Retorno de Ação**:
- O action creator retorna um objeto contendo o tipo da ação e um payload, onde as propriedades têm o mesmo nome que os valores providenciados (usando a notação simplificada do ES6).
# Conclusão
De forma resumida, o processo visa facilitar o manejo de erros nos campos do formulário ao incluir informações úteis no estado, melhorando a experiência do usuário ao fornecer feedback claro sobre onde ocorreram os problemas.
Video Transcript
os coxetes e nós temos que arranjarmos o jeito de pegar o valor Tiro, o valor body de
um local.
Nesse caso vai ser do action creator.
Quando a gente chama action creator, já já vamos criar, por exemplo, a gente chama post
creator, nós vamos adicionar o nome da propriedade e o erro.
Essa maneira talvez.
Então, nós podemos passar esse cara aqui com o payload, dentro da payload.
Especialmente, eu gostaria de usar esse cara aqui como payload, mas como vai precisar
também desse cara, nós podemos adicionar esses dois como um objeto, certo?
O objeto que vai ser, deixa eu abrir uma nova, para explicar isso.
Então, payload, em vez de ser só um one string, assim, vai ser na verdade o objeto.
Esse objeto vai ter duas propriedades, um aqui vai descrever o erro e a outra que
vai ser o nome do erro, nesse caso eu vou chamar field, vai ser Tiro ou vai ser body,
entendeu?
E dessa maneira a gente vai falar action.payload.error, para pegar a descrição do erro e action.payload.body
para, ah, desculpa, ponto field, para saber qual o campo que houve um erro, o erro, certo?
Desculpando aqui após o reducer, a propriedade aqui vai ser o action, ponto payload, ponto
field, seguida do palavra error, certo?
Se fosse Tiro, isso iria ficar Tiro error e assim por diante, certo?
E no caso aqui do descrição do erro vai ser na verdade ponto error, certo?
Se você achar que isso está muito long, pode extrair essas propriedades do action.payload
aqui, vamos fazer isso então.
Como eu vou fazer uma variável aqui dentro desse case, eu vou adicionar as chaves aqui
para acertar o scopo local para essa variável que eu vou criar, certo?
Vou extrair o field e o erro de dentro da action.payload, aí não precisa mais digitar
o action.payload aqui, certo?
Outra coisa que podemos aprimorar é essa concatenação aqui, não precisa fazer se
no sc você pode usar o back tick que é o acento, sei lá, grave?
Deixe comentar aí com o nome desse cara, acho que acento grave, não é o agudo, agudo
é esse outro, né?
Anyway, então vamos lá.
Vamos dar um string interpolation, interpalação de string, certo?
Então deixa esse cara dentro e a variável vai ser field, então vou adicionar esse
cara aqui assim.
Field é uma variável que contém o valor título, title ou body.
Vai ser interpolado aqui, o valor vai ser substituído por exemplo, assim ficando title
error ou body error, certo?
E esse cara vai servir como o nome da propriedade aqui que vai ser modificada no estado, certo?
Que vai ser dada como novo estado.
Vamos salvar.
Então só revisando aqui, nós modificamos o estado inicial, adicionamos duas novas
propriedades, a title error e a body error, são propriedades que se houver algum erro
no formulário irão conter a descrição do erro, certo?
O caso aqui vai ser esse tipo de ação chamado change post error, vai pegar o campo que o
erro aconteceu e a descrição do erro e vai setar isso aqui e retornando como novo estado.
Vamos lá agora fazer o action creator para poder fazer retornar essa ação aqui.
Vamos lá para a pasta src, action, index, certo?
Se nós já temos change post title, change post body e assim por diante.
Então vamos adicionar um novo action creator aqui chamado change post error, certo?
Então nós fazemos só esse action creator com dois parâmetros, primeiro parâmetros sendo
o nome do campo que houve o erro e o segundo parâmetro sendo a descrição do erro.
Se você quiser só usar um parâmetro você pode passar um objeto, certo?
Eu vou deixar só com dois parâmetros mesmo.
Você pode fazer...
Então sinta-se à vontade de escolher a maneira que ele achar melhor.
Então vamos definir e vou chamar esse cara de field e o outro vai ser a descrição do
erro.
Então vamos chamar só de error, sei lá.
Agora sempre retornamos uma ação do action creator, um objeto que tem o tipo type, nesse
caso change post error e tem outra propriedade, a outra propriedade como convenção chamou
de payload mas você pode na verdade chamar de que quiser.
Eu chamo de payload, então vamos ser o objeto que tem o field, que é field, you error, error.
Certo?
Essa propriedade field tem o valor field que se refere na verdade ao primeiro parâmetro
da função.
A propriedade error tem o valor que é essa variável aqui segundo a parâmetro da função.
Como a propriedade tem o mesmo nome que o seu valor nós podemos fazer isso aqui.
Mesma coisa.
Graças a JavaScript S6.
Certo?
Então bem simples o nosso action creator retornação change post error.
Contém o campo que houve o erro e a descrição do erro.
Tá certo?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: