Resumo do Transcript

Então, a gente pode limpar o formulário toda vez que a gente sair daquela cena, a gente pode usar um método de life cycle, né? Ciclo de vida. Método de ciclo de vida. Nesse caso, vamos ver aqui. Vamos lá pra página do React Life Cycles. Só pra ver qual método de life cycle devemos usar. Demorando um pouquinho, porque eu tô fazendo os uploads ali. Cadê? Tem o mounting e tem o update e tem o unmounting. Vamos ver se cara, esse método is called when a component is being removed from the dome. Esse método é chamado quando o componente está sendo removido, é removido do dome. Próximo ser removido do dome. Então, a gente pode usar esse cara, component well mount. Unmount. Invocado imediatamente antes do componente ser desmontado, né? E destruir. Ah, não sei o quê. Ok, então vamos lá, vamos ver se o cara vai dar. Então vamos no post edit. Depois o component den mount, component well mount. Vamos ver. A gente quer resetar o formulário. Limpar tudo. Quando esse componente for desmontado. Para fazer isso, a gente tem que criar um action creator que vai mandar uma ação, uma action dizendo por favor limpe o formulário. Reset, não, resetar. Então vamos lá para actions index. A gente vai definir o quê? Um action creator para resetar o form. Reset form, post form, né? Vamos ver aqui. Certo? Vai ser bem simples. Uma função que retorna uma ação. E essa ação vai ser tipo o quê? Vamos chamar reset, post form, certo? A gente vai mandar essa ação e o reducer, responsável pelo formulário, vai receber isso e vai limpar o formulário. Certo? Então, voltando aqui no... Vamos lá para o post form reducer, certo? Seu cara que é responsável pelo formulário, esses caras aqui. Então quando você... Ele receber esse... Case reset, post form. O que a gente vai fazer? A gente quer retornar um novo estado com o título vazio e o body, conteúdo vazio. Certo? Vai notar que a gente tem esse objeto aqui já definido nessa variável chamada initial state. Então nem precisa falar isso de novo, só falar return initial state da mesma maneira que a gente fez aqui antes. Tá bom? É só isso. Muito simples. Então vamos voltar ao action aqui, só para dar uma re-fatorização. Eu quero te mostrar uma coisa legal. Aqui a gente definiu uma função de flash, né? Só para retornar um objeto, que é a action. Nesse caso você nem precisa falar return, você pode ometer isso aqui. É só remover isso e remover isso aqui, certo? Nesse caso você tem uma função de flash aqui retornar o objeto, mas nesse caso não vai dar certo porque ele pensa que essas chaves estão definindo um bloco de uma função, mas a gente está retornando na verdade um objeto. Então por isso que a gente precisa dos parênteses. Nesse caso agora a função entende que está retornando o objeto de tipo, objeto com propriedade type, reset, postform. Pode até pôr uma linha só se quiser. Certo? Tá aí. Bem simples. Só para recetar o formulário. Luz, campus, do formulário. Que estão no store do Redux, certo? O title e o body. Agora voltando para o post edit. Nós vamos chamar esse action creator. Vai lá do componente will amount, this.props.uk. Reset, postform. Certo? Bem simples. Mas a gente tem que primeiro injetar o reset postforms nas props do post edit. Então vamos lá embaixo no connect. E connect tem o map to special props. Que tem aqui definido. Vamos adicionar reset postform. Agora a gente tem que importar esse cara. Vamos lá em cima. Vai lá em cima. Importa o quê? Reset postform. Certo? Tudo legal. Então com esse componente post edit, se estiver prestes a ser desmontado, vai chamar o reset postform para limpar o formulário. Deixar tudo vazio, limpinho, para não ter problema quando a gente for para o page de novo e assim foi adiante. Então vamos lá. E testar. Vê se não tem nenhum problema. Aí vamos clicar hello world, editar. Certo? Tá? O formulário aqui. Volta, volta. Agora vai para o novo. Clica em novo. Tá limpo. Certo? Então tá tudo legal agora. Vamos só testar se a gente mudar de post. Se vai mudar. Mudou. Editar. Mudou. Volta, volta. Clica em novo. Tá certo. Tudo legal, hein? Você note até que fazendo dessa maneira componente whale amount nem precisa fazer limpar o formulário quando der o create post. Se a gente comentar isso aqui, vamos ver se ainda funciona. Ah, desculpa. Não vai funcionar porque eu botei whale amount dentro do post edit. Mas se a gente tivesse component whale amount, this props reset post form dentro do post new. Dessa maneira aqui, deixa eu só copiar só para demonstrar. O post new vai ter o component whale amount reset post form. Vai lá embaixo. Você não precisa fazer isso não. Eu só quero demonstrar que dá para fazer essa maneira também. Eu acho que essa maneira nem é tão boa porque eu tenho que digitar muitas coisas aqui, né? Reset post form. Vou fazer rapidinho isso para você ver. Reset post form. Vai lá em cima. O post reset post form. Salva. Agora eu vou lá do producer e comentei esse cara. Volto aqui no post new. Vamos lá. Vou testar. Eu clique no novo. Não sei o que. Não sei o que. Clique OK. Cadê o cara aparecer? Eu volto para o formulário e está limpo. Certo? Então funciona também dessa maneira. Depende de você que maneira que eu vou voltar a maneira de antes, certo? Usando só o próprio... Vou tirar esse componente life cycle. Volto no reducer. Vou deixar esse cara aqui. Deixa eu ser de novo. E no post edit. Já deixa assim mesmo, certo? Então a gente resolveu o problema do formulário das datas aparecerem no formulário de novo.