DEV Community

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

Read full post

Mark Erikson • Mar 26 '20

A few quick notes:

Our official Redux Toolkit package already sets up the thunk middleware by default in its configureStore API
RTK also includes a new createAsyncThunk API that helps abstract the process of writing standard thunks that dispatch based on promises
The store persistence bit isn't really relevant for this example
You can simplify the connect usage with the "object shorthand" form of mapDispatch (and also it's even easier if you use our new React-Redux hooks API )

Muhammad Awais • Mar 27 '20

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

rajatpc • Oct 14 '20

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

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 ?

Muhammad Awais • Oct 15 '20

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

Muhammad Awais • Oct 15 '20

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

Erika J • Mar 25 '20

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) :)

Muhammad Awais • Mar 25 '20

For sure. I will get hands on with it 🚀

rajatpc • Oct 14 '20

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

John Doe • Mar 25 '20

Great article and examples, thank you very much!

Muhammad Awais • Mar 25 '20

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

John Doe • Mar 25 '20

Absolutely agree;)

khalasnilesh • Sep 11 '20

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

Muhammad Awais • Sep 11 '20

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