Resumo da Transcrição

Vamos dar uma olhada no nosso aplicativo para ver se não tem mais nenhum bug ou problema aqui. Aqui o aplicativo rodando no iOS e no Android. Certo? Tenho uma lista de posts, dois posts. Vamos dar uma olhada. Hello, world. Não sei o que. Olá, mundo. Vamos editar. Adicionamos essa funcionalidade. Dá um OK. Você note que um, dois, três não está mais aí, não está mais aqui. Certo? E podemos deletar. Vamos adicionar um novo primeiro. Não sei o que. Adicionei. Vamos deletar o hola mundo. Editar. Ela está a post. Vou embora o hola mundo. Certo? Concegar. E assim por diante está tudo. OK, mas tem um detalhe aqui. Se notar que quando a gente clica em um post aqui, se o pedido do HTTP for rápido, ele muda rapidinho o conteúdo e o título daqui. Mas se não for, vai demorar um pouquinho. Se notar que inicialmente quando a gente clica, aparece carregando. Não nem deu para ver, mas aparece a palavra carregando, não é? Porque não tem nenhum selecionado. Mas no momento que você seleciona um e depois volta e seleciona o outro, aquele que foi selecionado anteriormente, a gente instala no estado do aplicativo. Para demonstrar isso, eu vou adicionar um set time out quando a gente der um FED post. Certo? Então eu vou lá para o post detail. SRC, barra components, barra post detail. Quando o post detail é montado, ele faz aquele FED post. Ele chama o action creator para pegar os dados do post. Eu vou adicionar o set time out aqui para simular o apetite HTTP para demorar um pouquinho. Porque normalmente demora um pouquinho. Então eu vou dar o set time out, vou mandar uma função e essa função vai chamar o des props FED post. E o time out vai ser de dois segundos. Certo? Então eu vou salvar e vamos ver o que acontece. Eu tenho uma lista, vou clicar em Hello World. O senote carregando apareceu. Um. E depois de dois segundos, finalmente obtemos o nosso post. Note que esse post tem Hello World. Vamos voltar aqui. Agora vou clicar em ASD no seu quê. O Hello Order ainda está aqui. E depois de dois segundos, o conteúdo foi substituído com o do post que a gente selecionou. Então esse negócio não é muito bom para a experiência do usuário. Então para solucionar esse problema, eu vou propor o que você faça o quê. Quando você voltar aqui para a lista de posts, você vai descelacionar o post. Ou seja, você vai no estado do aplicativo e naquela selected, se lembra do post reducer. Post reducer tem o all e tem o selected. O que a gente vai fazer? Setar o selected para no de novo. Dessa maneira, não vai ter nenhum post selecionado depois que a gente voltar para a lista de posts. Então para fazer isso, o que a gente vai fazer? A gente quer mudar o estado do aplicativo do Redux. Toda vez que a gente quiser mudar, a gente tem que fazer o quê? Tem que criar um action creator. O action creator vai retornar uma ação. E aquela ação vai ser despachada a todos os reducers. Nesse caso, o reducer que vai se importar com essa ação vai ser o quê? O post reducer, esse cara aqui. Então a gente vai adicionar um caso. E esse caso, a gente vai retornar, nesse caso a gente vai retornar um novo estado. E nesse novo estado, a gente quer setar o selected para no. Para nada. Não tem mais nenhum post selecionado, então a gente vai setar o cara para no. Isso que a gente vai fazer. Vamos lá. Voltando aqui no post detail. Eu vou deixar o time out aqui, só para ilustrar o exemplo, mas depois nós vamos remover. Certo? Então, como a gente pode fazer para remover? Como é que a gente vai fazer quando chamar o action creator? Você nota que a gente chama o action creator quando você volta para a cena anterior. Mas voltando para a cena anterior, na verdade você está desmontando a cena de ver post. Você está desmontando o post detail. Você nota que a gente tem o método de life cycle component-demount, mas tem também outro método chamado component-will-amount, certo? Esse cara aqui que é chamado quando o componente está preciso desmontar, ser desmontado. Então eu vou usar esse método de life cycle, certo? E o que a gente vai fazer? A gente quer chamar o action creator para desselecionar o post, né? Remover aquele post que está dentro do selected. Então vamos lá. O action creator sempre vai ser injetado como a props, então eu vou falar desse ponto props. Vamos dar um nome para ele, sei lá, desselect post, que tal, esse nome. E não precisa de nenhum argumento. É simples assim, certo? Então quando esse componente ver post desmontar, vai chamar esse cara, certo? Então a gente está usando this like post para poder ser injetado as propriedades desse componente. A gente tem que ir no map dispatch to props, vamos lá embaixo. O segundo argumento para o método connect é o map dispatch to props. Nesse caso eu estou usando a versão mais de objeto, que é mais simples, tem que digitar muita coisa. Então já tem o fet post aqui, eu vou adicionar o quê? Vou adicionar o desselect post, certo? Deixa o toggle soft wrap aqui para você ver, certo? Então tal desselect post, vamos importá-lo porque aqui a gente está injetando o cara como as props, como a propriedade do componente, mas a gente ainda não tem acesso a ele. Então vamos lá em cima e importar. Então aqui vamos importar também o desselect post, que vai estar dentro do actions. Nós vamos definir, já já, certo? Então só revisando, quando o componente está prestes a demontar, vamos chamar o action creator, chamar desselect post. Para poder usar o action creator a gente tem que injetá-lo como props do componente post detail. Nesse caso vai lá no map dispatch to props, que é o segundo argumento para função connect. Nesse caso adicionamos o desselect post lá. Note que o argumento aqui é um objeto, certo? Para poder usar esse cara tem que importar lá em cima, import desselect post, que vai estar dentro do arquivo chamado actions.js. Então vamos lá definir o desselect, voltando aqui. Vamos lá para o src, barra actions, barra index. Vamos lá embaixo e adicionar essa função desselect post. Vou fazer a função de flash, certo? Nesse caso essa função vai retornar o quê? Vai retornar uma ação, porque é um action creator, criador de ação. Então, nesse caso nem tem nenhum pedido HTTP, então eu só vou retornar um objeto, certo? A maneira que você pode retornar um objeto sem ter que digitar return no seu quê, é só botar os parênteses e o objeto, certo? Nesse caso vai ser uma ação com tipo, vamos chamar desselect post, certo? Falta o c aqui. Então action creator tem essa função de flash que retorna um objeto, retorno implícito de objeto requer os parênteses, se não vai pensar que é o bloco da função, que não é, é na verdade o objeto, certo? Não precisa de payload, é só o tipo, certo? Vou adicionar o ponto de vírgula ali e vou exportar esse cara, não se esqueça. Exportar para disponibilizar o desselect post em outro arquivo, nesse caso post detail, né? Certo? Então, como a gente definiu action creator, agora a gente tem que fazer o quê? Quando o action creator for chamado, a ação de tipo desselect post vai ser despachada para todos os reducers, mas qual é o reducer que vai se importar com esse cara aqui? Vai ser o post reducer. Vai lá no post reducer. O que a gente quer no post reducer? Aqui a gente quer setar o selected para node novo, né? Quando você seleciona o post, o selected vai ser o post aqui, vai ter esse título e vai ter esse conteúdo que vai estar dentro do selected. Mas quando a gente voltar, a gente não quer que aquele cara permaneça lá. Você nota que ainda está aí, depois de dois segundos aqui muda. Então, vamos aqui adicionar um caso, esse desselect post, certo? Nem precisa disso. E vou fazer o quê? Vamos retornar sempre o novo estado, né? Esse é o negócio do reducer. Ele não vai modificar o estado assim, diretamente, né? Nunca modifique o state avaliado diretamente. Sempre temos que criar, fazer uma cópia do estado, certo? Sempre retornar o novo estado. São aspectos de functional programming, programação funcional. Certo? Então, a gente vai retornar o novo objeto. Nesse caso, a gente vai retornar o novo estado, certo? Esse objeto vai copiar as propriedades do estado anterior e vai adicionar ou vai modificar o selected para ser o quê? Node. A gente vai setar o selected para node, o quê não vai ter mais nenhum post selecionado quando a gente voltar para a lista de posts, certo? É simples assim. Vamos salvar. Certo? Então, vamos lá dar uma olhada. Se deu tudo certo. Está aqui o cara lista de posts. Quando a gente clicar no Hello World, demora um pouquinho carregando e apareceu. Agora, quando a gente voltar, vai desmontar o componente, vai chamar o Action Creator. O Action Creator vai despachar aquela ação. A ação vai ser lidada aqui. Vai chegar nesse reducer. Chega aí de Select Post. O caso foi... Nesse caso, vai retornar o novo estado com o selected node. Vou voltar aqui. Vou clicar no outro. Você note que já apareceu carregando aquela palavra. Por que aparece carregando? Se você voltar para o post de tail, você note que na pulsão de render, se não tiver o post definido, ele manda o test carregando. Por isso que apareceu carregando. Porque o post não estava definido. Isso está corretamente. Está tudo correto porque quando a gente volta de volta, o Select agora é node. Parece carregando. Está aí o cara. Vamos voltar e clicar no outro, no Hello World. Apareceu carregando de novo. E agora o Hello World. Não tem mais aquele negócio de ver o post anterior aparecendo. E depois a cena modificar com o post que foi selecionado. Certo? Essas coisas? Por isso que é bom também fazer o time out para ver que essas coisas acontecem. A gente corre de um problema. Então vou remover o time out. Não precisa mais. Certo? Tudo ok? Certo? Certo? Então por esse vídeo é só. E até a próxima.