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.

Where we left off

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!

Make a 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.


Creating Actions

action boilerplate

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.

  1. Requesting the data.
  2. Data Requesting Successful (200 — got the data!)
  3. 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 async and 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 src/Utils called ActionTypes.js

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.

Open our 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.


Solution down below:

Now the only thing to left for us is to call the FetchCoinData action!

Calling FetchCoinData action!

Try to implement it. Here are the steps.

  • Import the action to CryptoContainer.js
  • Map the FetchCoinData inside connect argument.
  • call this.props.FetchCoinData() inside componentDidMount()

And that’s it!

Refersh the simulator (mac: cmd + R, Windows: ctrl + R), open Redux Devtools and you should see the data under crypto state.

Note: If it’s not showing up — try restarting the simulator

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!

Seeya in the next and final chapter!

Oh and — here’s the Source code as always!