Ohans Emmanuel
Aug 12, 2022 ⋅ 13 min read

Data fetching with Redux and Axios

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

Using Aws Lambda And Aws Cloudfront To Optimize Image Handling

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Nitish Sharma
Apr 12, 2024 ⋅ 12 min read
Building Web-Based Terminal Components With Termino.js

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

Chibuike Nwachukwu
Apr 11, 2024 ⋅ 6 min read
How To Build A Custom Gpt: Step By Step Tutorial

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Peter Aideloje
Apr 10, 2024 ⋅ 7 min read
Jest Adoption Guide: Overview, Examples, And Alternatives

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Ibiyemi Adewakun
Apr 9, 2024 ⋅ 12 min read
View all posts

27 Replies to "Data fetching with Redux and Axios"

  1. What if you have multiple fetches like fetchDetails, fetchArticles, etc?
    How do you stop the loading prop from going true/false/true/false?

  2. Thanks, great article, so what happens when you fire two requests and they both update loadingData to true one after the other, yet one completes first and seemingly loading is complete for both requests since loadingData would have been set to false by the first resolving promise?

  3. Going with the custom middleware approach, I’ve found a way to further improve code readability and decoupling.

    If you’re interested, take a look at react-redux-api-tools on npm or on github (labcodes/react-redux-api-tools).
    I’d love to have your input!

    Thanks <3

  4. Redux working fine without combine reducers. But once reducer(s) are cobmined it does not work. No data is dispatched to UI etc.

  5. hi There , so i am building an enterprise application and i really like this article where to come up with our custom middlewear but will be really nice if the auther answer the above questions.
    i am using Redux , redux-thunk and axios.and i want to externalize the api and dont want to repeat myself.

  6. You actually lost me with this statement. It’s not a problem of redux-thunk it’s a problem of having a wrong abstraction that is not a valid point for avoiding redux-thunk

    What if a new senior developer came around and decided the team had to move from axios to another http client, say, superagent . Now, you’d have to go change it the different (multiple) action creators.

  7. How can i do that?

    If i do

    useEffect(() => {

    it’s the same thing, because the flow is the same.
    Any idea?

  8. No. I tried

    useEffect(() => {

    but it’s the same thing, because the flow is the same.
    Any other idea?

  9. Instead of a boolean for is loading data, I use an array and just add each action type that is loading to it and delete each action that is done.

    If the action count is greater than zero, I display the loading. If I only want to display loading for certain types, I can just check the array for that action type.

  10. isLoadingData should be within it’s own domain in the redux store. Like this:
    details: {
    isLoadingData: false,
    articles: {
    isLoadingData: false,

  11. There’s no reason why you can’t just use a wrapper around fetch()/axios(), control state locally and/or globally, depending on what other parts of the application need to be affected by the call. Using redux-middleware means that you are tied to using redux. It also means that you are changing store state when changing the status of fetching/success/failure, it means that you have to go all around the redux cycle to get the data you want, as opposed to handling it locally in the react component. It also will trigger all your mapStateToProps functions – pretty unnecessary if you only need the result of that data local to the component.

  12. What if you need to make 2 calls, one depending on the other?
    For example fetch a users list and if the user is not in the list add it.

    Ho do you do that with this middleware?

  13. `if (action.type !== API) return;`
    You shouldn’t dismiss irrelevant action types here since there are other actions that may depend on other middleware. By returning, you effectively said “game over” for every other action.
    Instead, you should return `next`.

    Either way, I personally think this approach borderlines with an anti-pattern. And it gets complicated quickly!
    Redux’s concern is storing global state, not getting it. Especially since having a service consuming dispatch directly is so trivial compared to this approach. Also, Redux is sync by design. Introducing an async flow there? The amount of code demonstrated above IMHO speaks for itself.

  14. Hello Ohans Emmanuel,
    Allow me to first give you a round of applause and a huge thanks, your middleware is quite perfect, very beautiful coding. But yet I would to like to draw an little attention regarding combinedReducer that this structure works very well only if you have single reducer but what about multiple reducer can help me in this area
    Thank You again,

  15. This is really good.

    What I’m after, and maybe I missed it, are two APIs. In production mode, I use an API to make the real http calls, In dev mode, I serve up pre canned data without making any http calls.
    I haven’t quite worked out how to make this kind of switch, based on the env variables – any ideas?

  16. Why are we even using redux middleware to make api call, why cant we just make the api call in the container and then dispatch the action just to populate the data ??

    I dont see any advantages of using middleware.

  17. I prefer new redux toolkit createAsyncAction which returns promise and have cancelation funcunalty, you cant await mutlipe actions with this api middlware.

  18. Great article…
    I seem to be getting CORS errors – “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.myjson.com/bins/19dtxc. (Reason: CORS request did not succeed).”

    I’ve tried adding “Access-Control-Allow” headers – but with no luck.

    Any thoughts, please?

Leave a Reply