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:

Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
Implementing Advanced Features With The Navigator.Share API

Implementing advanced features with the navigator.share API

Explore advanced capabilities for content sharing with the navigator.share API, including dynamic content sharing, custom share targets, and batch sharing.

David Omotayo
Nov 29, 2023 ⋅ 10 min read
Chas Peacock Leader Spotlight

Leader Spotlight: Scaling for the next phase of growth with Chas Peacock

We spoke with Chas to get his insights on building technology and internal processes for companies that are scaling quickly.

Jessica Srinivas
Nov 29, 2023 ⋅ 7 min read
Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 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