Quindi nel creatore di azioni di creazione del prodotto che attualmente è una funzione che restituisce semplicemente
un'azione, ora possiamo modificarlo un po '. Invece di restituire un'azione, ora possiamo restituire
un'altra
funzione lì grazie a Redux Thunk, grazie a questo pacchetto possiamo farlo ora e questa sarà una funzione
che riceve la funzione di invio come argomento e quindi a sua volta deve inviare un azione. Quindi, qui, in questa funzione di ritorno, ora non ho
semplicemente bisogno
di non restituirlo ma di spedire questa azione, questa
è la differenza importante e qui mi manca una parentesi graffa.
Allora, cos'è successo?
Cambio prodotto per essere una funzione che in realtà possiamo ancora inviare dall'interno dei nostri componenti ma che ora
può ancora funzionare come prima, quindi
non abbiamo bisogno di cambiare tutti questi creatori di azioni, quindi puoi rimanere fedele alla
vecchia sintassi ma ora grazie a Redux Thunk, una sintassi alternativa, per così
dire, è supportata anche quando questa funzione di creatore di azioni non restituisce immediatamente un oggetto di
azione ma invece, dove restituisce una funzione e, se lo fa, Redux Thunk interverrà e si
assicurerà che tutto ancora funziona e se restituisce una funzione, allora questa è una funzione che
deve ricevere un argomento, la funzione di invio che verrà passata automaticamente da Redux Thunk, quindi Redux
Thunk
alla fine chiamerà questa funzione per te e quindi puoi quindi invia una nuova azione e
qui, invia l'oggetto azione reale che in precedenza volevamo inviare, ma
prima di farlo, ora puoi eseguire qualsiasi codice asincrono che desideri e che sarà permesso e non romperà il tuo
Redux perché Redux Thunk si occuperà di questo e puoi saperne di più su
questo nel mio corso React, ad esempio o ovviamente nella
documentazione ufficiale di Redux Thunk, anche nei documenti ufficiali di Redux.
Quindi ora qui possiamo inviare una richiesta HTTP e in React Native, possiamo usare l'API di recupero
che è integrata e il recupero
qui funziona sostanzialmente come l'API di recupero nel browser dove è disponibile anche questa.
Ci vuole un URL a cui si desidera inviare la richiesta e questo è questo URL
che abbiamo qui, quindi copierò quell'URL da Firebase e lo inserirò qui.
Ora il recupero sembra che recuperi sempre solo i
dati, quindi se ottiene dati ma in realtà il nome è un po 'confuso qui, non è solo usato
per ottenere dati, puoi anche usarlo per inviare una richiesta post
o una richiesta put, quindi qualsiasi tipo di richiesta HTTP. Inoltre, non solo inviamo una richiesta a questo URL, ma
ora, come ho detto, Firebase traduce le tue richieste in un tipo di query di database e una struttura di database,
in modo da poter aggiungere qui qualsiasi nodo
desiderato, qualsiasi segmento desiderato, come ad esempio prodotti e Firebase creeranno una cartella qui nel database e memorizzeranno
i tuoi dati.
Importante e questa è solo una cosa specifica di Firebase, è necessario aggiungere. JSON qui.
Quindi non è richiesto a causa di React Native o a causa di Javascript o perché è una richiesta HTTP, questa è
solo una cosa specifica di Firebase. Per impostazione predefinita, questo invierebbe una
richiesta get ma per memorizzare i dati Firebase vuole una richiesta post e per inviarlo, dobbiamo recuperare un
secondo argomento per recuperare che dovrebbe essere un oggetto Javascript. In quel secondo argomento, puoi impostare la chiave
del metodo e descrivere il metodo HTTP di questa richiesta e che può essere ottenuto, inserito
e così via e qui dovrebbe essere post che aggiunge questo prodotto che stiamo per inviare a questo nodo
che sarà creato lì.
Ora puoi anche impostare alcune intestazioni lì e dobbiamo impostare un'intestazione,
dobbiamo aggiungere l'intestazione del tipo di contenuto e devi semplicemente aggiungere intestazioni come oggetto e quindi avere coppie
chiave-valore con i tuoi identificatori di intestazione come chiavi e i valori come valori e qui il
valore è application / json per far sapere a Firebase che stiamo per inviare alcuni
dati JSON e quindi dobbiamo farlo.
Dobbiamo aggiungere un corpo con i dati che vogliamo aggiungere a questa richiesta e i dati dovrebbero essere
nel formato JSON.
Per fortuna, React Native supporta l'oggetto JSON supportato anche da Javascript lato browser e lì possiamo
chiamare stringify per trasformare un array o un oggetto Javascript in formato JSON, quindi in una stringa
alla fine e
lì, voglio aggiungere il mio prodotto. Quindi, alla fine, voglio stringere qui
un oggetto che contiene il mio titolo, la mia descrizione, il
mio imageUrl e il mio prezzo, non
l'ID perché in realtà Firebase genererà un ID per noi qui che è davvero conveniente.
Ora questo invierà la richiesta, ma ovviamente voglio creare il prodotto localmente solo se
la richiesta ha avuto successo perché allora posso effettivamente utilizzare anche l'ID creato automaticamente
che Firebase mi restituirà e recuperare comodamente restituisce una promessa, che è questo oggetto Javascript che alla fine si risolverà in
un valore in futuro o genererà un errore in futuro.
Quindi per attendere questa risposta, possiamo quindi aggiungere qui dopo il recupero, quindi su questa
promessa e otterremo la nostra risposta qui in modo da poter fare qualsiasi cosa con la risposta.
Puoi anche ascoltare gli errori con catch ed è qualcosa che dovresti già
sapere perché le promesse non
sono specifiche di React Native, ovvero Javascript vaniglia e React Native supporta anche la sintassi più moderna di
asincrono in attesa invece di allora e cattura. Per usarlo, aggiungi asincrono qui di fronte alla tua
funzione, questa parola chiave asincrona e ora puoi attendere la tua risposta qui e archiviarla in una costante con questa sintassi, con
la parola chiave wait.
Ora dietro le quinte, questo trasforma questo nella vecchia sintassi con allora, quindi
è come se tu avessi aggiunto allora qui e hai usato la tua risposta in un callback che ci sei arrivato.
Ma è un po 'più facile da leggere ed è per questo che userò questa sintassi
di attesa asincrona, basta essere consapevoli del fatto che è come aggiungere quindi, solo più leggibile. Quando usi async wait in ogni caso, questa
funzione qui restituirà sempre automaticamente una promessa, quindi l'intera funzione di creazione
del
prodotto ora restituisce una promessa.
Non l'aveva mai fatto
prima, ora
lo vedrai qui, ora restituisce una promessa. Quindi questa è la nostra risposta,
questa risposta ora può essere un po 'spacchettata per ottenere i dati lì dentro, quindi
i dati di risposta, ciò viene fatto chiamando la risposta. json, questo è un metodo disponibile
sull'oggetto risposta che stiamo ottenendo. Anche questa è un'attività asincrona che dobbiamo
attendere e alla fine questo ci darà i dati restituiti da Firebase quando aggiungiamo un prodotto.
Ora per ora possiamo semplicemente registrare i dati di risposta per vedere cosa c'è dentro e continuo a inviare la mia
azione qui, ma poiché abbiamo aspettato qui e quindi questo è come se fosse in più blocchi allora,
questo sarà spedito solo una volta che queste operazioni qui sono fatto.
Quindi, salviamo questo e aggiungiamo un nuovo prodotto andando nella sezione admin qui
e poi aggiungerò una camicia
bianca, ho scelto una bella immagineUrl per
questo, eccola qui.
Diciamo che costa 39. 99, questa è una camicia bianca che è piuttosto elegante.
Se ora lo salvo, devo prima caricarlo, ora viene aggiunto, eccolo qui e ora
se dai un'occhiata
a Firebase,
vediamo anche che ora c'è un nodo prodotti. In questo, questo è un ID univoco e
lì abbiamo i dati che abbiamo inviato e se dai un'occhiata alla tua
console, vedi che è ciò che abbiamo ricevuto, sono
questi dati di risposta qui.
Questo contiene una chiave nome e quindi anche questo ID generato da Firebase, ciò significa che quando spediamo i nostri dati qui,
possiamo effettivamente aggiungere una chiave ID qui e aggiungere resData. nome per accedere a questa chiave nome
sulla risposta restituita da Firebase per inoltrare l'ID generato sul lato server al
nostro creatore di riduzione prodotto alla fine o alla logica che viene eseguita nel riduttore.
Quindi ora nel riduttore di prodotti, non possiamo effettivamente utilizzare questo ID fittizio qui, ma invece, ci
aspettiamo che dai nostri dati di prodotto. Ora otteniamo un campo ID che è l'ID generato sul lato
server, per ora mi limiterò all'ID utente fittizio ma otterremo questo ID generato sul lato server qui ed eccolo qui
e quindi lo usiamo su anche il frontend, che sarà importante per dopo quando elimineremo anche
cose e così via.
Quindi questo aggiunge un prodotto ma, ovviamente, non appena ricarichiamo l'app, è sparita perché nell'app è stata
memorizzata solo in memoria.
Ora lo memorizziamo anche su un server ma non lo recuperiamo mai da un
server, quindi assicuriamoci di farlo.