Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux — Chapter III

Indrek Lasn
Oct 16, 2017 · 5 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

Why? If the API URL ever changes — we only need to change it in one place, neato! 👍

Next— 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

Image for post
Image for post

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 a function which gets exported.

Ready?

Creating Actions

Image for post
Image for post
action boilerplate

Next, we return a thunk action. Thunk actions are functions. Why Thunk? More control. I will show you exactly what I mean.

Image for post
Image for post
Image for post
Image for post

This might seem a bit confusing. We have a function, which returns a function? Yep. This is Thunk doing its magic.

Think about this for a second. When requesting 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.

Image for post
Image for post

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

Image for post
Image for post

Import the action types to our action.

Image for post
Image for post

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.


Implementing The Reducers

Imagine our payload of something like this:

Image for post
Image for post

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?
Image for post
Image for post

Next up — implementing the switch() conditional and importing the action types.

Image for post
Image for post

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 FETCHING_COIN_DATA_SUCCESS and FETCHING_COIN_DATA_FAILURE

Solution down below:

Image for post
Image for post

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()
Image for post
Image for post

And that’s it!

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

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

We have our data mapped under this.props.cryptoperfect! 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 every day, never giving up are the traits you possess! Well done!

Seeya in the next and final chapter!

Oh and — here’s the Source code!

React Native Training

Stories and tutorials for developers interested in React…

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

React Native Training

Stories and tutorials for developers interested in React Native

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

React Native Training

Stories and tutorials for developers interested in React Native

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store