2

to be honest I know when to use Redux and the global state, but I have been seeing a lot of codebases which are using Redux-Saga or Thunk for almost all the api calls everything is being saved on the global state of the store and all api calls are going through actions or generators

I have always thought that Redux should be used only to fetch data needed globally but so far I'm seeing a whole different concept and I don't know which is better? does one have advantages over another?

To Clarify again; this is not a Redux Thunk vs Saga Question and when to use what

this is a when to call apis using either and store data in the store vs just using a regular function in say a useEffect hook and using useState to render the effects of the data coming from that api I feel that over using the global state to manage every piece of state in the app is just beyond the concept of global state and might also be bad for performance but I have worked with apps where they are using Redux for everything regardless of the need for it so If I have Redux installed in my app, does this mean all api calls go through middleware regardless

I mean from a design pattern point of view

Ahmed Sarhan
  • 35
  • 6
  • This seems like it could be a duplicate of https://stackoverflow.com/q/54302091/691711 – zero298 Dec 12 '21 at 20:44
  • no it's not read the comments down below – Ahmed Sarhan Dec 12 '21 at 21:18
  • 1
    It's perfectly fine to not to have everything in redux. – Wiktor Zychla Dec 12 '21 at 21:36
  • so if I call some api in the page, pass some props one level down for some parts of the app while I have other parts where I need global state in redux, would that be a good practice ? – Ahmed Sarhan Dec 12 '21 at 21:43
  • 1
    Yes. If a state isn't shared and there's no benefit from having it in the store, just don't do it. We often start with having as small store as possible and just refactor to move data from components to store only when necessary. – Wiktor Zychla Dec 12 '21 at 23:56

1 Answers1

3

The question is if api data is local - and most of the time it is not, or at least if can become global over time.

Assume you have a user profile. You show it only in a top right indicator.

Now later, you add a user profile page. And you keep that data local, too.

Now you have two places with the data and once it changes in one place, it will not automatically update in the other - data is running out of sync.

That's why it is a sensible choice to always treat server side data as global data. That doesn't mean you necessarily need to use Redux there - libraries like SWR or React Query can do a good job at that as well. And if you're using Redux, it doesn't mean that you need to hand-write thunks. The official Redux-Toolkit comes with RTK Query, which takes care of that for you.

Mind though, that using saga for api fetching is almost always "oversized". Sagas are great at managing very individual complicated data flows - but fetching data is hardly complicated. It's pretty much a solved problem. That's why Redux Toolkit includes thunks by default and we recommend thunk by default in the Redux Style Guide

On how we officially recommend dealing with apis, I'd suggest you take a look at the official Redux Tutorial - in chapter 5 it covers handling that by hand with thunk and in chapters 7 and 8 it shows how to work with RTK Query.

phry
  • 35,762
  • 5
  • 67
  • 81