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, vamos as requisições react..
Então o que temos pra falar da terceira tela?
É um pouco mais complexa, por isso deixamos ela por último.
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:
- Atualizar o estado do redux manualmente, subtraindo o preço do filme do saldo em wallet.balance.
- 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.
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
