Agora, é claro, ao armazenar um pedido, também seria bom vermos um
pequeno botão giratório aqui quando clicamos no botão agora até que isso seja feito e que possamos
implementá-lo também, basta ir para a tela do carrinho, que é onde despachamos
esta ação para enviar um pedido, aqui despachamos e agora despachamos aqui, é claro, retorna
uma promessa no final, exatamente porque remover do carrinho, que é o caso quando clicamos nesse botão e, em seguida, encomendar, adicionar pedido retornará um
promessa no final, graças à nossa alteração; portanto, a expedição retornará uma promessa; portanto,
é aqui que podemos controlar nosso estado de carregamento.
Agora, para tornar isso um pouco mais legível, vou removê-la dessa função
anônima aqui e criar uma nova função armazenada em uma
constante aqui no meu componente, mas fora da árvore jsx, e chamarei esse manipulador de pedidos ou algo assim.
Essa é a mesma função que eu usei
antes, agora vou me importar com o manipulador de pedidos de envio e agora a idéia é simples: adicionar ordem retornará uma promessa como
eu disse, despacho, portanto, retorna uma promessa, para que possamos adicionar assíncrono aqui, para que podemos usar
novamente o async aguardam e gerenciam o carregamento e, possivelmente, também o estado de erro, como fizemos anteriormente.
Então, precisamos apenas importar o estado de uso do React e, é claro, inicializar nosso estado novamente.
Então, aqui temos isLoading e definimos isLoading e, inicialmente, isso é falso, e se você quiser, o que eu não vou fazer aqui, mas se você quiser, também
poderá
adicionar tratamento de erros da mesma maneira que fizemos antes com o uso de erro de estado, talvez use
o efeito para mostrar um alerta e assim por diante, vou
me concentrar na parte de carregamento.
Portanto, agora aqui no
manipulador de pedidos de envio, chamarei
set isLoading e defina-o como true. Aguardamos esse despacho. Aguardamos até
que essa promessa seja concluída. configurará o carregamento de volta para false,
não estamos
mais carregando e agora podemos usá-lo para mostrar um indicador de atividade.
Então, vamos importar o indicador de atividade do React Native aqui e o que eu quero fazer é aqui, em
vez do botão ordem
agora, quero mostrar esse indicador enquanto estou carregando. Portanto, aqui posso verificar se isLoading é verdadeiro, se for o
caso, mostrarei meu indicador de atividade com um tamanho digamos pequeno e uma cor de cores, que você precisa ter certeza de que é importado,
primário e que fecha automaticamente caso contrário, se não estivermos carregando, então mostrarei
este botão, é claro.
Então, aqui eu quero renderizar esse botão no caso else e agora vamos tentar.
Vamos salvar isso, adicione
isso ao cartão talvez duas vezes, clique em pedir agora, vimos
o botão giratório por uma fração de segundo aqui e agora, se dermos uma olhada nos pedidos, aqui está o nosso pedido.
Agora vamos garantir que os pedidos também sejam carregados quando visitarmos a tela.