Portanto, no criador de ação de criação de produto, que atualmente é uma função que apenas retorna
uma ação, agora podemos ajustar isso um pouco. Em vez de retornar uma ação, agora podemos
retornar
outra função lá, graças ao Redux Thunk, graças a este pacote, podemos fazer isso agora e esta será uma
função que recebe a função de despacho como argumento e, por sua vez, precisa despachar um açao. Então, aqui, nesta função de retorno, agora eu simplesmente
não
preciso retornar isso, mas despachar esta ação, essa
é a diferença importante e estou perdendo uma chave aqui.
Então o que aconteceu?
Altero create product para ser uma função que ainda podemos despachar de dentro de nossos componentes, mas que agora
ainda pode funcionar como antes, portanto, não
precisamos alterar todos esses criadores de ação, para que você possa seguir a sintaxe antiga,
mas agora graças ao Redux Thunk, uma sintaxe alternativa, por assim dizer, também
é suportada onde esta função criadora de ação não retorna imediatamente um objeto de ação, mas sim,
onde retorna uma função e, se o fizer, o Redux Thunk intervém e garante que tudo
ainda funciona e se ele retornar uma função, essa é uma função que deve receber um
argumento, a função de despacho que será passada automaticamente pelo Redux Thunk; portanto, o Redux Thunk no
final
chamará essa função para você e, portanto, você poderá então despache uma nova ação e aqui, despache
o objeto de ação real que anteriormente queríamos despachar, mas antes
de fazer isso, agora você pode executar qualquer código assíncrono que desejar e que será permitido e não quebrará seu Redux
fluir porque o Redux Thunk cuidará disso e você pode aprender mais sobre isso
no meu curso React, por exemplo, ou é claro na
documentação oficial do Redux Thunk, também nos documentos oficiais do Redux.
Portanto, agora aqui podemos enviar uma solicitação HTTP e, no React Native, podemos usar a API de
busca incorporada e a busca aqui
funciona basicamente como a API de busca no navegador onde isso também está disponível.
É preciso um URL para o qual você deseja enviar a solicitação e esse é o URL que
chegamos aqui, então eu apenas copio esse URL do Firebase e o insiro aqui.
Agora, a busca parece sempre buscar dados; portanto,
se eles obtiverem dados, mas na verdade o nome é um pouco confuso aqui, não é apenas usado para
obter dados, você também pode usá-lo para enviar uma solicitação de
postagem ou de entrada, portanto, qualquer tipo de solicitação HTTP. Agora também não enviamos apenas uma solicitação para esse URL, mas
agora, como eu disse, o Firebase converte suas solicitações em um tipo de consulta e estrutura de banco de dados, para que você
possa adicionar qualquer nó que desejar aqui, qualquer segmento
que desejar, como por exemplo, produtos e Firebase meio que criam uma pasta aqui no banco de dados e armazenam
seus dados lá.
Importante e isso é apenas uma coisa específica do Firebase, você precisa adicionar. json aqui.
Portanto, isso não é necessário por causa do React Native ou por Javascript ou por solicitação HTTP, isso é apenas
uma coisa específica do Firebase. Por padrão, isso enviaria uma solicitação de
obtenção, mas para armazenar dados, o Firebase deseja uma solicitação de postagem e, para enviá-la, precisamos passar um segundo
argumento para buscar o que deve ser um objeto Javascript. Nesse segundo argumento, você
pode configurar a chave do método e descrever o
método HTTP dessa solicitação, que pode ser obtido, colocado, etc. será
criado lá.
Agora você também pode configurar alguns cabeçalhos lá e precisamos definir um
cabeçalho, precisamos adicionar o cabeçalho do tipo de conteúdo e você simplesmente adiciona cabeçalhos como um objeto e, em
seguida, possui pares de valores-chave com seus identificadores de cabeçalho como chaves e os valores como valores e aqui
o valor é application / json para informar ao Firebase que estamos prestes a enviar alguns dados
JSON e, em seguida, precisamos fazer isso.
Precisamos adicionar um corpo com os dados que queremos anexar a essa solicitação e os dados devem estar
no formato JSON.
Felizmente, o React Native suporta o objeto JSON que o Javascript do navegador também
suporta, e podemos chamar stringify para transformar uma matriz ou objeto Javascript no formato JSON; portanto,
em uma string
no final, desejo anexar meu produto. Então, no final, quero especificar um
objeto aqui que contém meu título, minha descrição, minha imageUrl e
meu preço, não o ID, porque na
verdade o Firebase irá gerar um ID para nós aqui, o que é realmente conveniente.
Agora isso enviará a solicitação, mas é claro que eu só quero criar o produto
localmente se essa solicitação for bem-sucedida, porque na verdade eu também posso usar o ID
criado automaticamente que o Firebase retornará para mim e buscar convenientemente uma promessa, que é esse objeto Javascript isso acabará resolvendo
um valor no futuro ou gerará um erro no futuro.
Portanto, para aguardar essa resposta, podemos adicioná-lo aqui após a busca. Portanto,
nessa promessa, obteremos nossa resposta aqui para que possamos fazer qualquer coisa com a resposta.
Você também pode ouvir os erros com o catch e isso é algo que você
já deve saber, porque as
promessas não são específicas do React Native, que é o Javascript baunilha e o React Native também suporta a sintaxe
de espera assíncrona mais moderna, em vez disso, e catch. Para usar isso, você adiciona async aqui antes
da sua função, essa palavra-chave assíncrona e agora pode aguardar sua resposta aqui e armazená-la em constante com esta sintaxe,
com a palavra-chave wait.
Agora, nos bastidores, isso transforma a sintaxe antiga com then; portanto,
é como se você adicionasse aqui e usasse sua resposta em um retorno de chamada que chegou lá.
Mas isso é um pouco mais fácil de ler, e é por isso que vou usar essa sintaxe
assíncrona à espera, apenas esteja ciente do fato de que isso é como adicionar então, apenas mais legível. Quando você usa async aguardar a propósito, essa
função aqui sempre retornará automaticamente uma promessa, portanto, toda essa função de criação
de
produto agora retorna uma promessa.
Não fez isso
antes, agora
fará, veja aqui, agora retorna uma promessa. Portanto, essa é a nossa
resposta. Agora, essa resposta pode ser descompactada para que os dados cheguem lá;
portanto, os dados de resposta são feitos chamando resposta. json, esse é um método disponível no objeto
de resposta que estamos recebendo. Isso novamente é uma tarefa assíncrona que
precisamos aguardar e agora, no final, fornecerá os dados retornados pelo Firebase quando adicionamos um produto.
Agora, por enquanto, podemos simplesmente registrar esses dados de resposta para ver o que há lá dentro e ainda
despachar minha ação aqui, mas como esperamos aqui e, portanto, é como se estivesse em vários
blocos, isso só será despachado quando essas operações forem realizadas. feito.
Então, com isso, vamos salvar isso e adicionar um novo produto, indo para a seção
de administração aqui e depois adicionarei
uma camisa branca, escolhi um bom imageUrl para
isso, aqui está.
Digamos que custa 39. 99, esta é uma camisa branca que é bem estilosa.
Se agora eu salvar isso, preciso carregar isso primeiro, agora isso é adicionado, aqui está e agora,
se você der uma
olhada no Firebase,
também veremos que agora existe um nó de produtos. Lá, esse é um ID exclusivo e lá
temos os dados que enviamos e, se você der uma olhada no seu
console, verá que é isso que recuperamos, que são
esses dados de resposta aqui.
Isso contém uma chave de nome e, em seguida, também mantém esse ID que o Firebase gerou, isso significa que quando enviamos nossos dados
aqui, podemos realmente adicionar uma chave de ID aqui e adicionar resData. name para acessar essa chave de nome
na resposta retornada pelo Firebase para encaminhar o ID gerado no servidor para nosso
redutor de produto criado no final ou para a lógica que é executada no redutor.
Portanto, agora no redutor de produtos, na verdade, não podemos usar esse ID fictício aqui, mas
esperar isso nos dados de nossos produtos. Agora, agora temos um campo de ID que é o ID gerado
pelo servidor, mas continuarei com o ID do usuário fictício por enquanto, mas obteremos esse ID gerado pelo servidor aqui e aqui está,
e, portanto, usamos isso em o frontend também, o que será importante para mais tarde, quando também excluirmos
coisas e assim por diante.
Portanto, isso adiciona um produto, mas é claro que, assim que recarregamos o aplicativo, ele desaparece porque, no aplicativo, ele
era armazenado apenas na memória.
Agora, também o armazenamos em um servidor, mas nunca o buscamos em um servidor,
portanto, certifique-se de fazer isso também.