Um momento
Aula 19
Cursos / CRUD com o Redux (e React Native)
Uso do Actions.pop

Summary

Resumo do Vídeo

Introdução

O vídeo aborda uma abordagem alternativa para gerenciar a atualização da lista de posts em uma aplicação utilizando Redux. Em vez de usar actions.list, o autor propõe usar actions.pop.

Modificações Propostas

  1. Reducers:

    • O postReducer deverá lidar com uma nova ação chamada create post.
    • O estado inicial deve ser retornado corretamente.
    • Quando um novo post é criado, ele é adicionado à lista existente de posts.
  2. Fluxo de Criação de Post:

    • Ao clicar em "OK" no formulário de criação de post, a função onCreatePress é chamada.
    • A ação create post é disparada utilizando Axios para fazer uma requisição HTTP.
    • O novo post é adicionado à lista de posts através do payload recebido da resposta.
  3. Atualização do Estado:

    • A lista de posts é atualizada no postReducer para incluir posts existentes e o novo post criado.
    • É utilizado o middleware redux-promise para lidar com a resposta da requisição Axios.

Código e Estruturas

  • O autor sugere encapsular a atualização do estado em uma variável e usar chaves para definir o escopo local dentro do case.
  • Exemplo de atualização do estado:
    const all = [...state.all, action.payload.data];
    

Teste

  • Após a implementação, o autor realiza um teste e confirma que um novo post, "mundo novo", foi adicionado corretamente à lista.

Conclusão

  • Esta abordagem com actions.pop permite um fluxo de trabalho que evita a necessidade de um reset da cena.
  • O autor se compromete a demonstrar a abordagem anterior utilizando reset em vídeos futuros, mas incentiva a utilização do método pop para quem quiser explorar essa alternativa.

Agradecimento

O vídeo finaliza com agradecimentos e um convite para o próximo vídeo.

Video Transcript

Oi galera, esse vídeo é opcional, é só para quem quiser aprender como usar, em vez do actions.list, fazer esse negócio, a mesma coisa que quando clicar no post e submeter esse cara. Em vez de usar actions.list, a gente vai usar actions.pop e a gente vai modificar em vez de, já deixa que o post farm reducer retornando no initial state e também vamos mudar o post reducer que vai também lidar com essa tipo de ação aqui chamado create post aqui e vai adicionar o novo post a essa array aqui all. Certo, então vamos lá, não é muita coisa não, então vamos lá, só para aprender mesmo como fazer as coisas de outra maneira. Então, primeira coisa que eu vou fazer é retornando aqui o post new, né, quando a gente vai no novo e clica no OK, vai chamar essa função onCreatePress, né, a gente chama action creator que faz pedido HTTP e se você volta e ir lá no actions index, esse create post faz a request com axios e retorna essa ação chamada create post e o payload vai ser o post que foi criado, tá bom? Então vamos aqui no primeiro a coisa vamos voltar post new, em vez de da actions list eu vou dar actions pop, o pop vai voltar a cena anterior, certo, deleta a cena que está esse cara aqui, dá um pop e volta para a cena anterior, mas a gente tinha aquele problema de quando a gente dava o pop a cena anterior não estava atualizada, mas para atualizá-la o que a gente vai fazer? A gente vai aqui no post reducer, né, se você se lembra dessa outra cena aqui, esses caras aqui vêm do all que é retornado pelo post reducer, né, se você lembra fat post no plural tem esse all que é uma array, né, uma lista de posts, então o que a gente vai fazer aqui no post reducer ele também vai lidar no adicional no novo caso, nesse caso vai ser o create post, você note que esse caso aqui também está sendo lidado no post form reducer aqui, mas nesse caso ele só limpa o formulário, retorno novo estado cujo título e array são strings baseas, mas a gente está também lidando com esse create post aqui no post reducer, então o que a gente vai fazer? A gente vai tornar os dados do state anterior, do estado anterior e também o novo all, mas qual é esse novo all? Então vai ser uma array lista com o que? Com os já existentes, né, dentro do estado tem o all, a gente vai copiar os posts que já existem na lista e vamos adicionar o novo post que vai ser o que? Vai vir da action.payload, nesse caso como é uma pedira HTTP do Axios a gente tem que pôr o ponto data da mesma maneira que a gente fez aqui nos outros, tá bom? Se você lembrar aqui, recapitular muito tempo atrás, a gente está usando o chamado middle air chamado redux promise, né, que ele pega esse request aqui, ele espera a request, o pedir HTTP, tem uma resposta e quando tiver resposta, finalmente ele pega e põe o resposta aqui dentro da payload e retorna essa nova ação. Nesse caso vai ser chamado response do Axios que para obter as informações do post a gente tem que falar ponto data, ponto data, tá bom? Então voltando aqui a post reducer, é isso. Dessa maneira quando a gente criar o post, automaticamente com essa lista aqui vai ser atualizada com os valores anteriores, os posts anteriores e o novo post. Agora esse negócio está muito long, então eu geralmente gosto de pegar esse cara aqui, vamos fazer uma variável. Nesse caso, como eu estou definindo a variável, eu vou botar os braces, essas chaves ao redor do caso, tá bom? Para definir o scopo local dentro desse bloco. Sempre se você fizer uma variável dentro do caso, ponha as chaves para definir essa variável local somente a esse bloco aqui. Por isso que eu uso isso. Tá bom? Vou definir o álcool nesse cara aqui que a gente fez. Essa é uma lista, copia os valores dos posts anteriores com o novo post e eu ponho aqui ó, vai ser esse ó aqui. Nesse caso no s6, como a propriedade do mesmo nome que o valor pode remover aqui é a mesma coisa. Dessa maneira vamos testar. Adicionando aqui, vou atualizar. Se não tem nenhum erro, se não a gente tem cinco posts, vai adicionar novo, mundo novo. Alguma coisa aqui, vou dar ok, se liga aí. Você viu que já adicionou mundo novo aqui? Certo? Tudo certinho. E usando o pop. Certo? Então só recapitulando aqui, a gente achou, nesse vídeo achou outra maneira de fazer esse workflow em vez de usar o action list e recetar o negócio. A gente só deu pop e voltou para a cena anterior, mas a gente tinha aquele problema que a lista não era atualizada, mas esse problema foi resolvido. A gente adicionou o caso create post para o post reducer lidar. Nesse caso ele vai adicionar o novo post que vem da PDJK3TP, a lista de all, essa lista aqui. Então retorna o novo estado, porque o novo estado foi retornado, o estado mudou, o componente list aqui foi atualizado. Toda vez que o estado muda, o componente é atualizado. Certo? Então não foi necessário usar o reset para recetar aquela cena. Isso é outra maneira de lidar com isso. Nos próximos vídeos eu vou deixar na maneira anterior usando o reset, mas se você quiser usar o pop também é legal. Tá certo? Então muito obrigado e até o próximo vídeo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: