DEV Community

Cover image for Making API calls in React using Redux-Thunk

Making API calls in React using Redux-Thunk

Muhammad Awais on March 25, 2020

Deep dive into react-redux with a thunk as a middleware to make the API calls on-load that makes your app faster. When working with Redux...
Collapse
 
markerikson profile image
Mark Erikson

A few quick notes:

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

I surely will do the next update to my repo with these recommended changes. great suggestions #mark.

Collapse
 
rajatpc profile image
rajatpc

I am here to get to know how to handle the errors, but bad luck you didn't cover up that part, I am hitting the API and got this object as an error in the http response->

error_code: 343
messsage: "Already accepted offer"
status: 0
Enter fullscreen mode Exit fullscreen mode

For normal response, I check everytime if status === 1 then that means I am having positive response, but in case of status === 0 that means some error coming from the server side but i am unable to print this message bcz it directly goes to the catch block and there i am getting simple http default error.
Do you have any idea how can I show this error message ?

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

You have take that error from catch block and store in your component state and do render in the Error section, also you can use the Reusable toast service to show the error from catch block, so there are multiple solutions you have to manage in terms of your need. Thanks

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

You missing something the boilerplate is tested and verified after each and every commit. So yeah

Collapse
 
fjordling profile image
Erika J

recommend you give redux-api-middleware a look, it will change your redux/api game, and allow you to move fully to fetch api (i.e. ditch axios) :)

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

For sure. I will get hands on with it 🚀

Collapse
 
rajatpc profile image
rajatpc

can you please look up my comment and suggest me any way out of it? That would be really appreciable. :)

Collapse
 
s0xzwasd profile image
Daniil Maslov

Great article and examples, thank you very much!

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

pleasure man. it's all about sharing knowledge with community as you learn and grow. #bambooVibes

Collapse
 
s0xzwasd profile image
Daniil Maslov

Absolutely agree;)

Collapse
 
khalasnilesh profile image
khalasnilesh

getting axios is not defined error. plz suggest what is wrong

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

hey, we use axios to make http request from our react/angular app, so i think this error is raised because you haven't install axios npm. try this command on your terminal/cmd of your project destination

C:/projects/react-redux-app> npm install axios

Collapse
 
falikyakov profile image
falikyakov

If you've already installed axios and are still getting this error,
you probably forgot to import - import axios from 'axios'

Collapse
 
eissorcercode99 profile image
The EisSorcer

I don't know if you've ever fixed this, but the Axios library has to be installed in order for this to work

Collapse
 
eissorcercode99 profile image
The EisSorcer

Has this structure changed since the release of React-Router v6?