Fetching an API using Redux and useEffect
This article will be dedicated to the sometimes troublesome road of fetching data over an API using Redux and Hooks in a React Native framework. I’ll be fetching data from the Foursquare API.
I wanted to write this article to maybe help others having a hard time finding the “HOW” in fetching data in React Native with Hooks and Redux. You’re not alone!
Wanna know more about hooks first? Read about it in my previous article!
In this article, I assume you have a little knowledge about how React Native and Redux work. If not, you can always find my notes about working with Redux in React Native here.
For this example, I worked with a managed workflow by Expo ( expo version SDK 35).
Setting up the application
If you want to fetch via an API using Redux, the first thing we need to add is Redux to our project! Next to Redux, we’re also gonna import Redux Thunk:
yarn add redux react-reduxyarn add redux-thunk
Redux Thunk is a middleware that lets us use actions that return a function instead of an action. It extends the store’s possibilities and lets you write async logic that interacts with the store. Want to know more? Go ahead!
My app logic is the following:
MyAppFolder:
- App.js - screens:
- HomeScreen.js- store
- actions
- action.js
- reducers
- reducer.js
- model
- spots.js
I like to keep things organized as you can see! The name spots refers to the data I’ll get back from the Foursquare API.
- App.js is my container, in there I render all of my screens/components I need
- Screens: is my folder that holds all my different “screens” of my app such as my HomeScreen but maybe also my FilterScreen, ProfileScreen, etc.
- Store: is the folder that contains all of the Redux logic. To keep things clear in my head I decided to put my actions and reducers function in separate folders.
- Model: is a folder that holds the logic of how an object is structured.
App.js
After installing, we also need to import the logic. We mainly want to use the useSelector and useDispatch functions from Redux. Import these in the file you want to fetch/use data in, for me it was in the HomeScreen.
import { useSelector, useDispatch } from “react-redux”;We also need to import the following in our App.js:
Notice that we also added a Provider tag round our HomeScreen tag and added a store where we appoint our reducer. We use combineReducers since there could be a possibility that there are multiple reducers.
Action file
After this, we’re gonna set up our actions. In here, we’re gonna pass the actual fetch call and make sure it transforms the given data into the desired result.
Steps to go through:
- Import our modal into this file
- Create a specific type for this action
3. Create a fetch
Now, how does this work?
First of all, we’ll be using Javascript/React Native’s built-in function of fetch and the async await syntax. I personally find working with async await more comfortable and easier.
We create a variable that holds the response of the fetch aka all the data. After that, we reform the data to a JSON and store it in a new variable. This variable holds all the data that we can use. Of course, you probably won’t need it all but just a selection of it so we’re gonna dig into the data and only select the part that we want to use. Store this data in a new variable (items) so we can use it.
After that, you can handle the data like you want to. I needed an array with objects per “place” I fetched. I created a new object per item using the map function and pushed the new Spot into the loadedSpots array.
After fetching and reforming the data, you need to pass it to the reducer. We’ll do this by using the dispatch function and setting our type (which we made in the beginning) and pass the data.
Reducer file
Phew! That was a lot. But be sure, most of the work is almost done. In our reducer we need to import the specific action type at the top of our file from ../actions/spots.js. Make sure you set a state holding an empty array.
In our switch statement, we’ll make a case for our action type (SET_SPOTS) where we return the merged state with the spots action.
Almooooost there, we just to need to implement the logic in our file where we need the data. For me, that’s in the HomeScreen file!
HomeScreen file
In this file, we’ll finally start using the data. We import the needed from react, react-native and react-redux. Also import your fetch funtcion from the action file.
We’ll be using the useEffect function for making sure our function is called the right way.
We’re using an async await function to load the data asynchronously since we’re fetching the data with async await. The setIsLoading() is a state function to manage the component effect, basically it will prevent you from getting errors on no-op effects of using useEffect. We pass the dispatch function to our useEffect function as one of its dependencies since this will not change. Passing this will prevent an infinite loop and make sure that this function is only called once.
Find my full code here.
So that pretty much covers it! It seems really easy but to be honest, I’ve wasted a lot of time on this.
NOTE: If you also want to use the Foursquare API there are some things you must know:
- For using the API you’ll need a client_id and client_secret, you can make one here: https://developer.foursquare.com/
- The API is free if you stay under 900 fetches a day. This isn’t much. If suddenly fetching on your app doesn’t work anymore, copy-paste your fetch url in your browser and maybe you’ll see an error that you’ve reached your quota.
- Always add a version data!
- The results differ from item to item. Sometimes there’s a photo object, sometimes there’s not. Make sure to encounter fallbacks in it.
I really hope this article can help those who were struggling just like me!
Make sure to follow me for more problems and solutions I come across within React Native and Machine Learning.
