Um momento
Aula 50
Cursos / CRUD com o Redux (e React Native)
Modificamos o PostEdit para Também Conter Validações

Summary

Resumo do Vídeo: Refatoração do Post Edit

Neste vídeo, o foco é refatorar o componente post edit da mesma forma que foi realizado no post new. A abordagem inclui a remoção de manipuladores de eventos específicos, como onTitleChange e onBodyChange, que foram transferidos para o post form para permitir a reutilização.

Passos da Refatoração:

  1. Remover Manipuladores Desnecessários:

    • Os métodos onTitleChange e onBodyChange no post edit são removidos, já que agora estão definidos no post form.
  2. Passar Props Necessárias:

    • Funções como changePostTitle e changePostBody são injetadas como props no post form por meio da função mapDispatchToProps.
  3. Adicionar Validação:

    • A validação do campo é configurada para post edit, semelhante ao que foi feito para post new, incluindo a injeção do changePostError.
  4. Erro de Título e Corpo:

    • Os erros de título e corpo são passados para o componente post form no post edit. É necessário garantir que essas propriedades estejam definidas no mapStateToProps.
  5. Verificação e Teste:

    • Após as alterações, foram realizados testes para assegurar que os erros aparecessem corretamente.
    • O retorno à funcionalidade do botão "OK" também foi abordado, com ajustes para que o botão seja desativado apenas quando houver erros.
  6. Validação Final:

    • A função validateField é utilizada dentro do componente post form para validar o título e o conteúdo, permitindo a desabilitação do botão com base nos erros de validação.

Observações Finais:

  • Após a implementação dessas mudanças, o funcionamento e a estrutura do post edit se alinham mais com as práticas de reutilização e validação implementadas. As validações e erros foram corretamente integrados e testados.

Video Transcript

Neste vídeo nós vamos refatorizar o post edit. A mesma maneira que a gente fez o post new, o que a gente tirou o onTidalChange, onBodyChange e o validate field de dentro do post new e depois dentro do post form para a gente poder re-usar a mesma coisa do post edit. Se eu volto no post edit, e vou no post edit, a gente não vai precisar mais desse onTidalChange e onBodyChange definidos no post edit porque já estão definidos no post form. Então, eu vou remover como a gente removeu. A gente vai voltar aqui e a gente tem que passar o quê? Se não, eu te vou voltando aqui, deixa eu voltar, desculpa. A gente usou o change post title e o change post body. Então, a gente vai precisar passar esses caras para o post form. Então, vamos lá. Change post title, esse é o 10 ponto props. Change post title porque foi injetado. Vamos pro props usar no map dispatch to props lá embaixo. Change post. Change post to props and change. Certo? Estes dois e voltando aqui. Salva. Você note que a gente tinha definido o validate field, onBodyChange, com a validação já quando estava fazendo post new. A gente tem que fazer a mesma coisa para o post edit. Eu vou ter que passar esse cara aqui, change post error também. Certo? Então, vou lá pro post edit injetar esse change post edit action creator no map dispatch to props aqui. Primeiro, a gente tem que importar lá em cima. Então, vou importar o change post error. Certo? Vou voltar aqui. Vou colocar as ações, actions, vou lá embaixo, injeta no map dispatch to props. E agora vai estar disponível dentro do componente e por isso eu vou passar como propriedade. Essa é a maneira pro post form. E vai automaticamente para lidar tudo porque já está definido lá no post form. Vamos ver aqui se funcionou novo. Tá ok, vamos lá pro edit. Editar. Tudo está tudo. A gente não passou os erros, por isso não apareceu nenhum erro. O senor de que no post new a gente tinha esse title error, body error passados pro post form. A gente tem que passar isso também. Propost edit. Então aqui eu vou adicionar pro post form title error. Error. Body error. Mas esses caras não estão definidos ainda, eu acho. Não são injetados como props, vamos lá embaixo no map state props. Temos que adicionar pro title error. Vem da onde? State.postform.taroerror. E o body error que essa propriedade aqui está disponível como desprop props.body error dentro do componente post edit. E vai vir da onde? Vai vir do state.postform.body error. Certo? Salvar. Vamos ver, tentadamente deu hot reload. Deixa eu ver. Um title error. Ainda não foi. Ah, esse cara aqui não precisa, a gente já está definido lá dentro. Vou tirar. Vamos ver aqui. A gente passou o title, o body, title error, body error. Será que tem todos esses caras aqui? Change post.taroerror. Já está aqui. Está importado. Vou lá no postform. Vou ver se vai aparecer. Vou reiniciar aqui para ver. Editar. Vamos ver. Está aí. Apareceu. Vou só precisar reiniciar tudo. Certo? Se eu não editar, apareceu já. Vou ver se o botão OK que a gente estava fazendo não funciona agora, mas ainda tem aquele problema de que a gente vai resolver já, já, de ficar ativo, mas a gente não valida ainda. Então, depois de fazer toda essa reflutarização, finalmente podemos consertar esse botão de OK. Agora que a gente está dentro do postform e tem acesso ao validate field, a gente pode usar o validate field aqui para validar o título e o conteúdo e só desabilitar o botão se não tiver nenhum erro depois de validar. Vamos lá em baixo, no disabled, eu vou tirar esses caras porque ele não valida inicialmente. Então, vamos fazer o que? Vamos validate field. Essa função vem do próprio componente, desse ponto validate field, com os argumentos. Deixa eu voltar aqui em cima. É a field que tem um valor e tem um nome. Certo, voltando aqui, a gente vai validar field com o nome. Primeiro do título, valor, 10.props.tiro.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: