Ehitagem: krüptovaluuta loomulik mobiilirakendus koos React Native + Reduxiga - III peatükk

Tere tulemast tagasi kohalike rakenduste arendamisse koos React Native ja Reduxiga nagu boss! Hea meel, et olete siin! ❤

See on II peatüki eessõna.

Sinna, kus pooleli jäime

Andmete toomine Reduxi ja Redux Thunkiga

Oleme lõpuks valmis oma andmeid tooma. Me hakkame kasutama münditurbiiri avalikku API-d. Kui leiate parema krüpto API - palun andke mulle sellest teada!

Tehke src / Utils / Constants.js fail ja lisage sinna meie API alus-URL.

Miks? Kui API URL kunagi muutub - peame seda muutma ainult ühes kohas, neato!

Järgmine - minge üle src / Actions ja looge fail nimega FetchCoinData.js - siin toome krüptovaluuta mündi andmeid. Me hakkame kasutama aksioose (jah, ma olen teadlik loomulikust toomise API-st) - ma eelistan siiski väga aksioose.

Kiire google'i otsing näitab, miks (rohkem võimalusi, parem API, parem veahaldus).

npm i - salvestage aksioosid

Importige aksioosid ja apiBaseURL saidist Constants.js - samuti lisage toiminguks katla plaat. Proovige seda ise rakendada. Pidage meeles, et toiming on lihtsalt funktsioon, mis eksporditakse.

Kas olete valmis?

Toimingute loomine

tegevuskatlaplaat

Järgmisena naaseme väikese käigu. Pöidlad toimingud on funktsioonid. Miks Thunk? Rohkem kontrolli. Ma näitan sulle täpselt, mida ma mõtlen.

See võib tunduda pisut segane. Meil on funktsioon, mis tagastab funktsiooni? Jep. See on see, et Thunk teeb oma võlu.

Mõelge sellele korraks. Andmete küsimisel on 3 olekut.

  1. Andmete küsimine.
  2. Andmete taotlemine õnnestus (200 - said andmed!)
  3. Andmeid, mis nõuavad ebaõnnestumist

See on täiesti mõistlik. Mõelge sellele kui lubadusele, seal kutsutakse lubadus üles, lubadus lahendatakse ja lubadus eemaldatakse.

Lõpetagem ülejäänud osa toimingu rakendamisest. Proovige andmete hankimist.

Lahe! See on üks viis, kuidas andmeid Reduxi ja Redux Thunkiga alla laadida. Mulle meeldib vigade käsitlemine. Samuti on võimalik kasutada asünkrit ja oodata ka siin.

Pange tähele ilusat tõrkeotsingut - see on suurim põhjus, miks me siin Thunk-i toimingut kasutame.

Järgmine samm - meie toimingutüüpide loomine. Alustage src / Utilsis faili nimega ActionTypes.js

Importige toimingutüübid meie toimingusse.

Hästi tehtud! Meie toiming andmete toomiseks on lõpule viidud! Peame oma kandevõime edastama reduktorile ja kaardistama toimingu ka meie komponendile.

Reduktorite rakendamine

Kujutage ette meie midagi sellist:

See on lihtsalt töötlemata teave. Peame need andmed edastama oma reduktorile.

Avage meie CryptoReducer.js ja määratlege meie esialgne olek

Me vajame:

  • Andmete hankimise olek, et saaksime näidata ketrajat.
  • Olek, mis hoiab päringu tegelikke andmeid.
  • Veakäsitlus - kas meil on viga ja kui jah, siis mida see ütleb?

Järgmine samm - lüliti () tingimuslikuks rakendamine ja toimingutüüpide importimine.

Uute objektide loomiseks kasutan meetodit Object.assign (). Samuti võite vabalt kasutada objektide levikut.

Mis mõte on sellist koodi kirjutada? Lihtne - hooldatavus! Jah, see on üsna palju andmete toomise katlakoodi - kuid see on õige tee!

juhtum FETCHING_COIN_DATA - on ette nähtud andmete toomiseks ja spinni kuvamiseks. Reakt käitleb kõiki vDOM värskendusi, me peame lihtsalt oma oleku üle andma.

Proovige rakendada juhtumite FETCHING_COIN_DATA_SUCCESS ja FETCHING_COIN_DATA_FAILURE juhtumeid

Lahendus allpool:

Nüüd jääb meile ainult FetchCoinData toimingule helistamine!

FetchCoinData toimingule helistamine!

Proovige seda rakendada. Siin on sammud.

  • Importige toiming saidile CryptoContainer.js
  • Kaardistage FetchCoinData ühendamise argument.
  • helistage sellele.props.FetchCoinData () sees komponentDidMount ()

Ja see ongi kõik!

Värskendage simulaatorit (mac: cmd + R, Windows: Ctrl + R), avage Redux Devtools ja peaksite nägema andmeid krüpto olekus.

Märkus. Kui seda ei kuvata - proovige simulaator taaskäivitada

Meie andmed on kaardistatud saidi this.props.crypto all - täiuslik! Rakendame järgmises peatükis toodud vaated!

Täname, et jõudsite nii kaugele, et olete tõepoolest sõdalane ja teil on React + Redux pro tulekuks vajalik. Järjepidevus, iga päev õppimine, kunagi loobumine on omadused, mis teil on! Hästi tehtud!

Seeya järgmises ja viimases peatükis!

Oh ja - siin on lähtekood!