Aula 19
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
-
Reducers:
- O
postReducer
deverá lidar com uma nova ação chamadacreate post
. - O estado inicial deve ser retornado corretamente.
- Quando um novo post é criado, ele é adicionado à lista existente de posts.
- O
-
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.
- Ao clicar em "OK" no formulário de criação de post, a função
-
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.
- A lista de posts é atualizada no
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étodopop
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: