Rakennetaan: Cryptocurrency -sovellus React Native + Redux -sovelluksen kanssa - luku III

Tervetuloa takaisin kehittämään natiivissovelluksia React Native ja Redux kuten pomo! Hyvää, että olet täällä! ❤

Tämä on ennakko jatkoa luvulle II.

Mistä jätimme

Tietojen nouto Reduxilla ja Redux Thunkilla

Olemme vihdoin valmiita hakemaan tietomme. Aiomme käyttää coinmarketcapin julkista sovellusliittymää. Jos löydät paremman salaustekniikan sovellusliittymän - ota meihin yhteyttä!

Tee src / Utils / Constants.js-tiedosto ja lisää siihen API-pohjainen URL-osoitteemme.

Miksi? Jos sovellusliittymän URL-osoite muuttuu koskaan - meidän on muutettava se vain yhdessä paikassa, neato!

Seuraavaksi - siirry kohtaan src / Actions ja luo tiedosto nimeltään FetchCoinData.js - täällä haetaan kryptovaluuttakolikotiedot. Aiomme käyttää aksioita (kyllä, olen tietoinen alkuperäisestä hakemissovellusliittymästä) - pidän silti paljon axioista.

Nopea google-haku näyttää miksi (enemmän vaihtoehtoja, parempi sovellusliittymä, parempi virheiden käsittely).

npm i - tallenna aksioita

Tuo axios ja apiBaseURL Constants.js -sovelluksesta - lisää myös keittotaso toimintoa varten. Yritä toteuttaa tämä itse. Muista, että toiminto on vain toiminto, joka viedään.

Valmis?

Toimintojen luominen

toiminta kattilalevy

Seuraavaksi palaamme hieno toiminta. Thunk-toiminnot ovat toimintoja. Miksi Thunk? Lisää hallintaa. Näytän sinulle tarkalleen mitä tarkoitan.

Tämä saattaa tuntua vähän hämmentävältä. Meillä on funktio, joka palauttaa funktion? Jep. Tämä on Thunk tekemässä taikuuttaan.

Ajattele tätä hetkeksi. Tietoja pyydettäessä on 3 tilaa.

  1. Tietojen pyytäminen.
  2. Tietoja pyydetään onnistuneesti (200 - saanut tiedot!)
  3. Epäonnistumista vaativat tiedot

Tämä on täysin järkevää. Ajattele sitä lupauksena, siellä kutsutaan lupaus, ratkaistaan ​​lupaus ja poistetaan lupaus.

Viimeistelemme loppuosan thunk-toiminta. Yritä hakea tietojen haku.

Viileä! Tämä on yksi tapa hakea tietoja Reduxilla ja Redux Thunkilla. Pidän virheiden käsittelystä. On myös mahdollista käyttää asynkkeä ja odottaa myös täällä.

Huomaa kaunis virheidenkäsittely - tämä on suurin syy siihen, että käytämme Thunk-toimintoa täällä.

Seuraava - toimintatyyppien luominen. Aloita luomalla src / Utils-tiedosto, nimeltään ActionTypes.js

Tuo toimintotyypit toimintaan.

Hyvin tehty! Tietojemme haku on suoritettu loppuun! Meidän on siirrettävä hyötykuormasi reduktorille ja myös kartoitettava toiminta komponentillemme.

Pelkistimien toteuttaminen

Kuvittele meidän hyötykuorma jotain tällaista:

Se on vain raakatietoja. Meidän on välitettävä nämä tiedot reduktorillemme.

Avaa CryptoReducer.js ja määritä alkuperäinen tila

Me tarvitsemme:

  • Tila tietojen noutamiseksi, jotta voimme näyttää kehruun.
  • Tila, jolla on pyynnön todelliset tiedot.
  • Virheiden käsittely - onko meillä virhe ja jos on, mitä se sanoo?

Seuraava - kytkimen () ehdollinen toteuttaminen ja toimintotyyppien tuominen.

Käytän Object.assign () -menetelmää uusien objektien luomiseen. Voit vapaasti käyttää myös objektilevitystä.

Mitä hyötyä on kirjoittaa koodia näin? Helppo - ylläpidettävyys! Kyllä, se on melko paljon katkaisukoodia tietojen noutamiseen - mutta se on oikea tapa!

tapaus FETCHING_COIN_DATA - on tarkoitettu, kun haemme tietoja ja näytämme kehrää. React käsittelee kaikki vDOM-päivitykset, meidän on vain siirrettävä tilamme.

Yritä toteuttaa tapaukset FETCHING_COIN_DATA_SUCCESS ja FETCHING_COIN_DATA_FAILURE

Ratkaisu alla:

Nyt ainoa jäljellä oleva asia on kutsua FetchCoinData-toiminto!

Soitetaan FetchCoinData-toiminnolle!

Yritä toteuttaa se. Tässä ovat vaiheet.

  • Tuo toiminta CryptoContainer.js-tiedostoon
  • Kartta FetchCoinData yhdistämisargumentin sisällä.
  • kutsu tätä.props.FetchCoinData () komponentinDidMount () sisällä

Ja siinä kaikki!

Päivitä simulaattori (mac: cmd + R, Windows: Ctrl + R), avaa Redux Devtools ja sinun pitäisi nähdä tiedot salauksen tilassa.

Huomaa: Jos se ei näy - yritä käynnistää simulaattori uudelleen

Tietomme on kartoitettu tämän.props.crypto alla - täydellinen! Otetaan käyttöön seuraavan luvun näkymät!

Kiitos, että pääset tähän mennessä niin pitkälle, että olet todella soturi ja sinulla on mitä tarvitaan React + Redux -profiilin tulemiseen. Johdonmukaisuus, päivittäin oppiminen, koskaan luopuminen ovat ominaisuuksia, joita sinulla on! Hyvin tehty!

Seeya seuraavassa ja viimeisessä luvussa!

Voi ja - tässä on lähdekoodi!