2022-08-12
3709
#redux
Ohans Emmanuel
297
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:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 â‹… 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 â‹… 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 â‹… 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 â‹… 8 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(() => {
    Promise.all([
    dispatch(fetchDetails()),
    dispatch(fetchArticles()),
    ])

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

  8. No. I tried

    useEffect(() => {
    Promise.all([
    dispatch(fetchDetails()),
    dispatch(fetchArticles()),
    ])

    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