Gerenciamento de Requisições React com bibliotecas @zup-next: P2

23/7/2019
Raphael de Souza
Raphael de Souza
Front-end Developer

Um pouco de música, tecnologia e um café, por favor.

Está sem tempo para ler? Aperte o play para escutar o artigo.

Estamos muito felizes em ver você de novo por aqui. Esperamos que tenha lido a primeira parte dessa série de artigos. Se não, por favor, acesse ela aqui e volte depois para continuarmos. Você pode também acessar a aplicação demo completa, a qual é base para este artigo. Sem mais delongas..

Então o que temos pra falar da terceira tela?

É um pouco mais complexa, por isso deixamos ela por último.

react

No container Payment, precisamos carregar alguns recursos e ainda criar uma order. Para começar, podemos usar a mesma estratégias que usamos anteriormente:

<p> CODE: https://gist.github.com/raphaelspimenta/abf7566db439a27d033e9fb9817e18af.js</p>

<p> CODE: https://gist.github.com/raphaelspimenta/600766fcebd9ecf37a689e880f8b39ef.js</p>

Os componentes Loading, LoadingError, OrderProgress, OrderSuccess e PaymentMethod, no código acima, não são importantes para o entendimento do comportamento da biblioteca. Mas, se você deseja verificá-los, eles podem ser encontrados aqui.

Só pra lembrar, nós usamos isCreating, hasCreateError e hasCreateSuccess para verificar o status da operação create. Estas são algumas funções utilitárias disponíveis na biblioteca e você pode encontrar uma lista de todas elas aqui.

No componente Summary, nós chamamos a função createOrder que dispara a ação para realizar a operação create do recurso order. Note que aqui nós passamos para a função o objeto order que desejamos criar.

Ótimo! Se você executar o código agora, quase tudo estará funcionando como esperado, mas existem dois problemas que precisamos corrigir.

Primeiro problema: precisamos resetar o estado do nosso recurso

Uma vez que order é criado, “order.create.status” continuará com o mesmo valor no estado do redux, sendo success ou error. Então, se voltarmos para a tela principal (home) e tentarmos comprar um filme outra vez, nós não conseguiremos, pois encontraremos a página de pagamento nos mostrando uma mensagem de erro ou sucesso, dependendo do resultado da última order criada.

Para corrigir isso, precisamos reiniciar o estado para a operação create do nosso recurso antes de desmontar o componente (ou sempre que montarmos ele). Para alcançar isso, nós podemos usar a action creator resetOrderStatus. Fácil assim!

<p> CODE: https://gist.github.com/raphaelspimenta/4363f760531a0b4b34ae3f80b7f71f1c.js</p>

Observação: Você pode encontrar uma lista completa de todas as actions creators disponíveis em um recurso visitando a nossa documentação.

Agora, se você tentar comprar um novo filme, funcionará como queremos! Mas ainda existe um outro problema para solucionar…

Segundo problema: não deveríamos atualizar o valor do saldo no estado do redux?

Se você prestar atenção à mensagem de sucesso da operação order, vai perceber que há algo errado ali. O texto diz “Thank you for buying with us. Your current balance is x” e olhe só, o valor dex continua o mesmo. Assim como também o valor no header não foi atualizado. Nada bom! Não podemos permitir os usuários comprarem coisas para sempre.

A forma como definimos nossos recursos apenas diz a eles o que fazer quando uma ação é disparada, e eles irão lidar com os próprios dados. Mas, nós podemos encontrar situações onde uma ação deve também impactar outro recurso. Esse é um deles. Quando uma compra é paga, em outras palavras, quando um recurso order é criado, o valor do saldo pode ter sido alterado.

Por essa razão, nós também precisamos atualizar o recurso wallet. Para fazer isso, podemos usar uma das seguintes abordagens:

  1. Atualizar o estado do redux manualmente, subtraindo o preço do filme do saldo em wallet.balance.
  2. Carregar o recurso wallet novamente.

Nós escolhemos a segunda abordagem para corrigir esse problema. Nós faremos isso definindo que após cada compra feita com sucesso, o recurso wallet deverá ser carregado novamente. Isso é bem simples de fazer.

Quando declaramos nossos recursos, podemos passar um terceiro parâmetro, que são generator functions para serem executadas após a operação ser realizada com sucesso. Note que esses parâmetros devem ser generator functions pois serão integradas como parte do saga.

Veja no código abaixo como podemos alterar a definição do recurso order para implementar essa funcionalidade.

<p> CODE: https://gist.github.com/raphaelspimenta/6f7bde470dca1156c1c4382e221d339a.js</p>

Feito! Agora, toda vez que comprarmos algo, a ação para carregar o recurso wallet será disparada, o que atualizará o valor do saldo em todos os lugares da aplicação.

As ações de update e remove, disponíveis em nossos recursos, funcionam de forma similar à create. Você pode acessar a documentação completa dos recursos e ver por si mesmo.

Para implementar a primeira sugestão dada (atualizar o estado do redux manualmente, subtraindo o preço do filme do saldo em wallet.balance), nós poderíamos usar o primeiro parâmetro passado para a função de callback de sucesso. Para mais informações, por favor, confira a nossa documentação.

requisições no react

Palavras finais

Por enquanto é isso! A aplicação demo está implementada e nós lidamos com as requisições de uma forma bem rápida e organizada. Obrigado por nos seguir até este momento. Adoraríamos ouvir suas opiniões, e se você tiver ideias, sinta-se livre para contribuir com nosso repositório.

Na terceira parte dessa série, falaremos sobre algo muito interessante e útil. Como usar @zupnext/redux-action-cache para evitar requisições desnecessárias nas nossas aplicações. Te vejo lá!

Agradecimentos especiais aos co-autores Tiago Peres França e Isac

O que você achou deste conteúdo?
Quer receber nossos conteúdos?
Seu cadastro foi efetuado com sucesso! Enviaremos as novidades no seu email.
Oops! Something went wrong while submitting the form.