Um momento
Aula 39
Cursos / CRUD com o Redux (e React Native)
Adicionamos titleError e bodyError ao Form Reducer

Summary

Resumo da Implementação do Formulário de Postagem

Neste trecho, a discussão gira em torno da implementação de um formulário para a criação de um novo post, focando no componente post new.

Estrutura do Estado

  1. Propriedades do Formulário: O estado do formulário já contém propriedades para armazenar o título e o body do post.
  2. Tratamento de Erros:
    • Serão adicionadas duas novas propriedades: titleError e bodyError para armazenar os erros específicos de cada campo.
    • Inicialmente, ambas as propriedades terão o valor null, indicando que não há erros.

Tratamento de Ações

  1. Criação de Ação: Uma nova ação chamada Change Post Error será criada para lidar com a alteração dos erros no formulário.
  2. Modificação do Estado:
    • A ação retornará o novo estado, copiando as propriedades do estado anterior e atualizando as novas propriedades de erro.
    • Como a ação pode ser aplicada a ambos os campos, o erro correspondente será passado através do action.payload.

Dinamicidade

  • A implementação permitirá a atualização dinâmica do campo de erro, utilizando a sintaxe de colchetes (square brackets) para se referir ao nome da propriedade a ser modificada, facilitando assim a manipulação de ambos os campos de erro sem a necessidade de criar ações separadas para cada um.

Essa abordagem inicial é simples, mas há espaço para melhorias futuras, como a criação de uma única propriedade de erro capaz de lidar com todos os tipos de erros no formulário.


Esse resumo descreve a implementação de um formulário para criar posts, com a inclusão de um sistema de gerenciamento de erros utilizando Redux.

Video Transcript

Para começar a nossa implementação vamos focar aqui no fórmulares de criar o novo post, certo? Na post new aqui, neste componente. Primeiro de tudo nós temos que ir lá no reducer do post form. Nós temos a propriedade título e body que são responsáveis para armazenar os valores do formulário. Agora nós irão precisar de duas novas propriedades para armazenar o erro de cada campo. Eu vou chamá-las do mesmo nome que a propriedade seguida da palavra error. Erro, certo? Então nós vamos adicionar o title error e o body error, certo? A minha escolha aqui é fazer duas propriedades para deixar esse negócio simples, mas talvez se você quiser aprimorar o código depois você pode ter só uma propriedade chamada error que vai envolver todos os tipos de erros do seu formulário. Mas como estamos? Vamos deixar simples. Agora, só agora, certo? Então, inicialmente essas propriedades serão no porque não tem erro, certo? Agora, se tiver algum erro, a descrição do erro vai ser armazenada com o valor dessa propriedade, certo? Meu design vai ser assim. Se tiver o erro, então vai ser algo assim, vai ter um string que representa que vai dizer que tipo de erro é. Mas se não tiver erro, vai ser só no. Então, inicialmente é no, certo? Agora, para poder mudar essas propriedades por causa do Vurdux, a gente tem que sempre chamar o action creator para criar um tipo de ação, certo? E esse tipo de ação, vamos chamar de quê? Vamos adicionar o caso aqui. Vamos dizer Change Post Error. Ah, nem preciso de vir, vou lá, desculpe. Change Post Error, esse aqui é o tipo de ação que nós vamos usar para descrever o ajuste desses erros, certo? Você poderia fazer dois tipos de ações Change Post Error do título ou ir dublar. Mas eu vou fazer só uma ação que vai cobrir todo tipo de erro, certo? Você vai ver já, já como isso vai acontecer. Então, essa ação retorna o novo estado, copia os propriedades do estado anterior e seta o erro. Nesse caso, nós temos Title Error, certo? Mas também temos o Body Error. Então, como vamos fazer para lidar com qualquer tipo de erro? Espera um pouco aí, vamos só fazer o Title Error. Nesse caso aqui, a gente vai pegar a mensagem do erro do payload, do action.payload, que vai ser passada pelo action creator, tá bom? A mensagem de erro vai estar dentro do payload, da ação, certo? Esse aqui serve por causa do Title, mas não serve para dubar. Então, o que a gente vai fazer? Você não disse que fosse body, a gente só mundaria essa palavra aqui. Então, o que a gente vai fazer? A gente pode setar essa propriedade, o nome da propriedade dinamicamente. Como é que isso funciona? Você põe esses aqui, chamados square brackets.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: