Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux — Chapter III
Welcome back to developing native apps with React Native and Redux like a boss! Glad to have you here! ❤
This is a pre sequel to chapter II.
Fetching The Data With Redux and Redux Thunk
We’re finally ready to fetch our data. We’re going to use the coinmarketcap public API. If you find a better crypto API — please let me know!
src/Utils/Constants.js file and add our API base URL there.
Why? If the API URL ever changes — we only need to change it in one place, neato! 👍
Next up — head over to
src/Actions and make a file called
FetchCoinData.js — here we will be fetching our cryptocurrency coin data. We’re going to use axios (yes I’m aware of the native fetch api) — I still very much prefer axios.
Quick google search shows why (more options, better API, better error handling).
npm i --save axios
Import axios and the apiBaseURL from
Constants.js — also add the boilerplate for the action. Try to implement this on your own. Remember, an action is just an function which gets exported.
Up on next, we return a thunk action. Thunk actions are functions. Why Thunk? More control. I will show you exactly what I mean.
This might seem a bit confusing. We have a function, which return a function? Yep. This is Thunk doing it’s magic.
Think about this for a second. When requesting for data, there are 3 states.
- Requesting the data.
- Data Requesting Successful
(200 — got the data!)
- Data Requesting Fail
This makes perfect sense. Think it of as a promise, there’s calling the Promise, resolving the promise and ejecting the promise.
Let’s finish implementing the rest of the thunk action. Try to implement fetching the data.
Cool! This is one way how to fetch data with Redux and Redux Thunk. I like the error handling. Also it’s possible to use
await here as well.
Notice the beautiful error handling — this is the biggest reason we are using a Thunk action here.
Next up — creating our action types. Start by creating a file in
Import the action types to our action.
Well done! Our action for fetching the data is complete! We need to pass our payload to the reducer and also map the action to our component.
Implenting The Reducers
Imagine our payload of something like this:
It’s just raw data. We need to pass this data to our reducer.
CryptoReducer.js and define our initialState. We need:
- State for data being fetched so we can show a spinner.
- The state that holds the actual data from the request.
- Error handling — do we have an error and if so what does it say?
Next up — implementing the
switch() conditional and importing the action types.
I’m using the
Object.assign() method for creating new objects. You’re free to use
object spread as well.
What’s the point of writing code like this? Easy one — maintainability! Yes it’s quite a lot of boiler code for fetching data — but it’s the right way!
case FETCHING_COIN_DATA — is for when we are fetching the data and showing the spinner. React handles all the vDOM updates, we just need to pass our state.
Try to implement the cases for
Solution down below:
Now the only thing to left for us is to call the
Try to implement it. Here are the steps.
- Import the action to
- Map the
FetchCoinDatainside connect argument.
And that’s it!
Refersh the simulator (mac: cmd + R, Windows: ctrl + R), open Redux Devtools and you should see the data under
We have our data mapped under
this.props.crypto — perfect! Let’s implement the views in the next chapter!
Thanks for making it this far, you truly are a warrior and you have what it takes to come a React + Redux pro. Consistency, learning everyday, never giving up are the traits you possess! Well done!
Oh and — here’s the Source code as always!