Resumo do Transcript

Então, continuando, vamos aqui. Então, a gente não, embora que tenhamos mudado o valor inicial do formulário no estado do aplicativo, o application state ou a store, a gente não dá pra ver ele no formulário porque o postform não recebeu o título, né, o body. Mas onde é que tá esse título e o body? Certo? A gente tem que injetar porque esses caras vem do que reducer, de que reducer eles vem do postform reducer, certo? Não é post reducer, é o postform agora, entendeu? São coisas diferentes. O postform reducer vai retornar um novo estado, o estado do formulário, do title e do body, certo? Então, vamos lá. Vai no post edit. Lá embaixo, no map state to props, a gente tem que adicionar umas coisas aqui. Retornar também o que? O title e o body. Mas da onde? Do state.q postform, né? Deixa eu ver se eu digitei corretamente. Vou lá pro index do reducer. Se chama postform, tá certo? Então, lotando aqui, postform.q.title. Da mesma maneira, state postform body. Então, injetamos os valores do formulário dentro desse componente. Agora, a gente pode usar aqui, des.props.tire e des.props.body, certo? Note que esses caras aqui, embora que já tínhamos os mudados aqui modificados, não apareceu um formulário porque a gente não deu o postform nas propriedades. Esse action creator tá usando esse title e esse body, mas esses caras são os valores do post relacionado. A gente não pode mudar esse cara, porque é os valores iniciais do post. O post tem esse valor, mas a gente tá mudando, na verdade, é o formulário e não o post original, entendeu? São diferentes. Então, com isso, vamos continuar aqui. Qual é o on title change e o on body change? Certo? A gente pode definir aqui também. Certo? Se bem que chovei aqui o negócio aqui. Voltando ao postform, a gente passou como des.props. Se bem que eu acho que a gente poderia usar definir o on title change e o on body change dentro desse componente postform. Agora que eu tô pensando aqui. Mas se você quiser dar essa refletarização, você pode, mas toma cuidado porque como o formulário postform são um detalhe que o postform tá sendo usado em duas páginas, duas cenas, né? Então, se você for pra editar, digitar alguma coisa, aí volta. O estado vai ser mantido. Então, por você clicar novo, vai aparecer lá também. Eu vou te mostrar isso já, já. Mas vamos voltar aqui. Vamos deixar assim mesmo. Vamos lá. Vamos definir o on title change aqui. Vai ser a mesma coisa que os outros, né? On title change. Oh, não precisa desse, desculpa. Vai ser o que, igual, função de fletcher. Fazer o que? Vez. Ah, eu botei taro aqui. Desculpa. Vai ser o que? Vez.props.change.postaro com um novo taro, né? Da mesma maneira, eu vou esperar você editar o on body change. Certo, aí, tudo certo? Você volta aqui, você volta pro... Se você voltar pro post new, você vê que é a mesma coisa, né? Esse e esse. A gente tá fazendo a mesma coisa lá. Então, por isso que eu sugerei que a gente talvez ponha desse cara de volta pro post form. Certo? Então, vamos aqui continuar. Vou dar a copia e dupliquei a linha. No meu caso, no do Atom, eu pode digitar comando shift D no caso do Mac. Não sei, hotkey do Windows ou do Linux. Se você souber, por favor, poste nos comentários. Post aí, valeu. Então, vamos lá. Change pro body. Ah, desculpa. Vai copiar a coisa toda. On body change. Body. E... Certo. Certo, agora vamos lá e passar desse on body change. Esse cara vai ser passado como props pro post form e o des on body change. Vai ser passado como props, chamado on body change, dentro do post form. Certo? Então, vamos só dar uma testadinha. Vou botar aqui a função no. Pode também retornar on define. Não importa. Certo? Só pra deixar um placeholder aí. Vamos voltar aqui e ver se não deu erro. Se esqueci de alguma coisa, esquecemos de alguma coisa, né? Cadê? Tem nenhum post? Ah, deve ser porque o hero que eu tá dormindo. Cadê? Opa. Opa, desculpa. Dá? Até errado esse negócio. Como é que sai daqui? Home. Pousse de post, Redux. Sai, pareceu. Acho que o hero que eu tava dormindo serve o Dino. Como tava dormindo, reiniciou uma nova instância e apagou todos os posts. Como a gente já falou disso, alguns vídeos atrás. Então vamos lá. Vamos clicar num deles. É de tá. Ah, esquecemos de o quê? De injetar os action creators usando o map dispatch to props. Então vamos lá. O que é aí? Post edit. Esses caras, ele não sabe o que é. Então vamos lá. Constant map dispatch to props. Então, há duas maneiras de definir o map dispatch to props. Uma função que retorna o... Cadê? Função que retorna usando o combine, não sei o quê, bind action creators é. Essa função que retorna esse cara aqui, chamada o bind action creators, e o parâmetro do map dispatch to props dispatch. Mas tem também a outra maneira que é só usando um objeto. E esse que eu vou usar aqui. Tá bom, só pra você aprender um outro jeito. Map dispatch to props, vou definir como objeto. Não uma função, tá bom? Esse objeto vai ter o quê? Vai ter aqueles caras, aqueles action creators que a gente usou, que nós usamos aqui. Change, post title e change, post body, certo? Agora, a gente tem que importar. Vamos lá em cima. Certo? Vamos lá importar esses caras. Da onde? Unir diretório acima, barra actions. Tenho que ir change, post body, change, post title. Certo? Ah, você nem importa a ordem mais, sei lá, só pra deixar consistência. Title e body. Vamos lá. Novamente, esse não tem mais nenhum erro. Esperando, um, dois, três, ah. Hello world. Editar. Ter esse ponto props, change, post body, no other function. De novo, o que é que aconteceu? Mais uma vez, a gente esqueceu do quê? De passar o map dispatch props pro connect. Então, vamos lá embaixo. O connect tem o map dispatch props como o primeiro argumento e o segundo argumento é o map dispatch props. Nessa maneira, essas caras vão ser injetadas no post edit. Então, vamos continuar? Mais uma vez, espero... Esperamos que não tem mais erros, certo? Vamos lá. Um, dois, três, cadê? Aí, tá aí. Então, pareceu. O formulário já com os valores definidos. Certo? Mas, vamos voltar aqui. Clica novo. Opa, o que é que aconteceu? Eu mecionei isso antes. Porque, quando você clica aqui e clica a editar, a gente pega os dados do post relacionado, esses dados, modifica o estado do aplicativo, modifica aquele post form, né? O title e o body. Então, tá modificado no estado do aplicativo já. E como a gente tá usando o mesmo formulário para o editar e para o novo, tá aparecendo também no novo, certo? Qual é a solução pra isso? A solução é limpar o formulário toda vez que sair da página, da cena. Quando você estiver no novo, e... Só, desculpa, novo não, no editar, né? Se você estiver no editar, se você quer cancelar ou voltar, você tem que apagar tudo, certo? Se não, vai aparecer no novo. Dá mais maneira, depois de clicar OK, a gente vai limpar também. Então, como a gente vai fazer isso?