Um momento
Aula 51
Cursos / CRUD com o Redux (e React Native)
Refatorizamos o validateField Para Desabilitar o botão de OK Corretamente

Summary

Resumo da Discussão sobre a Função validateField

Problema Identificado

  • A função validateField estava modificando automaticamente o estado de erro (postError) ao ser chamada, resultando na exibição de erros antes da interação do usuário com o formulário. Isso não é desejável.

Solução Proposta

  • Alterar a definição da função validateField para que ela apenas retorne a descrição do erro, se existir, sem alterar o estado do erro diretamente. A implementação deve ser independente do Redux, retornando apenas strings que descrevem os erros de validação.

Etapas da Mudança

  1. Modificação da validateField:

    • Remover a chamada que altera o estado do erro.
    • Retornar a descrição do erro, se houver, ou retornar null se não houver erro.
  2. Atualização das Funções Dependentes:

    • Alterar o método onChange e outros métodos para usar a nova lógica da validateField. Agora, após chamar validateField, o erro retornado será utilizado para atualizar o estado do formulário.
  3. Implementação de Lógica de Habilitação do Botão:

    • Criar uma nova função canSubmit que verifica se o formulário pode ser submetido, considerando as validações implementadas. O botão de submissão será desabilitado se houver erros nas validações.

Detalhes Técnicos

  • A validação agora retorna:
    • Um string com a descrição do erro se o valor for inválido.
    • null se o valor estiver correto.
  • A lógica do estado do formulário foi ajustada para refletir essas mudanças, garantindo que o botão de submissão atue corretamente com base nas validações.

Conclusões

  • As alterações garantiram que os erros não apareçam antes da interação do usuário, tornando a experiência mais intuitiva.
  • A refatoração simplificou a função validateField, tornando o código mais modular e fácil de manter.

Observação Final: O autor sugere feedback ou discussão sobre o tópico nos comentários.

Video Transcript

mas tem um problema com a definição do nosso validate field agora que eu estava pensando aqui a gente quer que esse dissembol aqui quando a gente chama o validate field quer que o aconteça vamos voltar a definição aqui a validate field como estava definido agora ela chama esse change post error e se a gente chamar o validate field para ver se o formulário está valido não vai mudar o post error e vai aparecer aqui o que vai aparecer o erro automaticamente inicialmente isso você note que eu salvei apareceu eu aqui deixa eu reiniciar quando eu clico novo já aparece o erro lá automaticamente a gente não quer isso né embora que seja um erro mas a gente não quer que isso que apareça antes de o usuário interagir com esse campo de texto então a gente vai ter que mudar a definição do validate field então a gente não quer que mude o post error diretamente dentro da validate field a gente quer definir a validate field de uma maneira assim o validate field vai pegar a field e vai validar e se tiver um erro vai só retornar a descrição do erro e quem quiser fazer alguma coisa com o erro que pode fazer que faça nesse caso o validate field só vai retornar um string com o erro e quem usou essa função vai ter acesso a esse erro e pode chamar essa função lá de fora para realmente modificar o estado aplicativo e adicionar a descrição do erro certo então a gente vai pegar e tirar esse cara para o validate field ficar independente de estar usando o redux ou não essa é a action creator tá bom então eu vou remover esse cara aqui desse ponto props change post error certo e vou retornar só o esse string aqui e para o else case a mesma coisa é só retornar não então quando eu chamar o validate field com a field que tem um nome valor e label se o valor for string vazia vai estar em valor a gente retorna o erro com a descrição a descrição do erro não pode estar em branco e se não tiver nenhum erro vai retornar não agora vamos voltar para o ontar o change e o body change para modificar para usar essa nova versão então desse modo valor de fio título não sei o que não sei o que esse cara vai retornar o erro então vou chamar aqui title error certo dessa maneira aqui a gente punir o error e vai chamar aqui depois de postar o change post error e o que a gente tinha antes tinha o field né o nome que esqueci já cadê deixa eu voltar o reducer só para ver a gente está pegando essa action pt payload vai ter a field vai ter o error a set change post error em um lado actions cadê o change post error a definição só para ver aqui confirmar a primeira argumenta a field e o segundo é o error e a payload passa o field e o error certo então qual é a fio daqui o primeiro argumento vai ser um title e o segundo vai ser o erro descrição do erro certo então chama validate field que agora vai só retornar a descrição do erro ou retornando se tiver o erro aí você chama o post error vai setar o title o erro do title aqui com essa descrição ou valor não se não tiver o erro certo o title error do reducer lá da mesma maneira vamos fazer um body change vai botar esse validate field const body error desculpa e vai chamar o desfondo change post o próximo change post error com qual é a field o nome é body e qual o erro a descrição body error ou não se não tiver o erro certo salvar agora vamos aqui ver como é que vai aparecer aqui ok tá tudo ok note o botão de ok já não funciona mais estou tentando clicar e tá correto certo então o que a gente fez vamos recapitular aqui a gente estava fazendo o disable aqui do botão de ok a gente notou que inicialmente não tinha erro não tinha validação inicial e se a gente chamasse o valor de fio o definir com a definição original apareceria o erro automaticamente antes do usuário interagir com o formulário mas isso não é o que a gente quer então a gente teve que mudar a definição da valor de fio para em vez de ser dependente da chamada do action creator chamada change post error o valor de fio agora se tornou uma função independente do dox isso retorna só só olha na field o valor e se tiver em valor retorna um string com a descrição do erro se não tiver não é isso retorno no e com isso a gente modificou o entire change body change para usar esse seu novo definição chama aqui post error e change post error depois no final aqui com a descrição do erro ou não se não tiver nenhum erro e por isso agora quando a gente chama o desmodo valor de fio retorno string que nesse caso vai ser true e verdadeiro tem o valor verdadeiro no JavaScript e você pode usar aquele técnico para forçar ser bullying ou não precisa então o botão de ok vai estar desabilitado se o título estiver incorreto se tiver um erro que esse cara retorna um erro nesse caso se eu digitar alguma coisa note que o botão de ok já está funcionando de novo porque mas não está correto ainda porque a gente tem que validar o conteúdo também então esse cara vamos pegar aqui tem que adicionar também ou desse muito vale de fio qual o nome body e qual é o valor desse ponto props ponto body certo salvar aqui e vamos ver aqui digitou o título deixa eu digitar uma coisa deixa reiniciar tudo desculpa vai para o novo digitou o título tira não dá para clicar ok vou digitar não dá para clicar ok certo não dá para clicar ok distrito título não dá para que ok digita o conteúdo agora sim certo não acho que esse cara está longo para caramba que então normalmente vamos extrair esse cara e fazer a própria função então vamos fazer a função sei lá vamos fazer a função chamada sei lá can vamos fazer a função chamada que submita pode submeter então eu vou desabilitar se o formulário não poder ser submetido vou lá em cima vou fazer essa função quem submete vou colar aquele código e vou só retornar e aí não acho que eu usei a função de flash com o property initializer porque eu estou referenciando desse ponto props aqui para fazer o bind desse cara a palavra chave des para ser se refiri a postform como a função de chave não define seu próprio contexto e o contexto da palavra chave des vai ser da função ou daquilo que cobre que encobre a função de flash nesse caso o componente postform o opcente certo então essa função que só retorna o valor desses dois caras se quiser quebrar a linha aqui eu sei lá faço o jeito que quiser mas está aí então essa função aqui retorno que retorna desculpa está errado esse cara aqui vale de fio retorno erro e o erro é um valor verdadeiro a string né por isso a gente quer retornar o que para poder submeter o formulário esse cara tem que ser não significa não ter erro então vou falar assim ou esse cara aqui não ou mas aí esse cara aqui também for não nesse caso se for não não tem erro não vira verdade com a negação e quando esses dois caras essas duas condições por satisfeitos nós podemos submeter o formulário certo então por isso que a gente pode usar dessa maneira será que eu posso submeter vou desabilitar se eu não puder submeter salva aqui des ponto can submite tem que chamar a função está dizendo que não é uma função o que que eu fiz aqui de errado que é a sua mente a gente é tudo novo post não funciona está aí só para você reedinciar não funciona digita não funciona digita agora funciona certo isso foi a nossa refatorização aqui só para poder fazer esse cara do disabled funcionar corretamente espero que tenha gostado do vídeo deixe comentar se tiver uma dúvida ou só para discutir o assunto e até a próxima
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: