Search code examples
javascriptreactjsreact-reduxredux-sagaredux-thunk

Different ways to fetch values from web services in react redux?


Trying to find the best way to fetch values from web services in ReactJs, redux.

Found ways using useEffects, fetch, redux-thunk, redux-saga.

But which is best to be used..?


Solution

  • This is a bad bad question. Okay, I cannot even explain why it's bad. I'll start with this, you're talking about completely different things. I guess you're asking about how to make network requests in react. Here's brief description of the things you're talking about and why they are used:

    useEffect: It's a hook in react, with which you can run an effect(basically running a function) on every or if depending on a state, some renders.

    fetch: It is a web API with which you can make ajax requests(network requests) which is based on promises. Previously, we had XHR for doing so which is event-based. It is still used because fetch doesn't allow tracking the download progress of the response download. 'Should I use fetch or XHR for making requests', now that'd be a good question.

    redux-thunk && redux-saga: Now you'd wanna use this with redux. In redux, as you probably know, dispatching action is synchronous. So if you wanna do some asynchronous task and dispatch the action object after that, then look into redux-thunk or redux-saga.

    So the question shouldn't be 'Which of these should you use for fetching things off the web', because they're not specifically used for that purpose.