reactjs - React and Redux: Proper Way To Store Loading State in Redux

Question

I have one file loading ui that I call whenever my app's components fetch data from the backend so the frontend can show loading... The issue is when one component is fetching data, I dispatch loadingData() which causes the other components to showing loading... as well. I know this is happening because I have one action for loading that I dispatch. My question is, should I have separate loading actions for each component? If no, how can I go about fixing this? Thank you.

//Loading action

export const LOADING_DATA      = '[ui] LOADING DATA';
export const LOADING_DATA_COMPLETE    = '[ui] LOADING DATA COMPLETE';

export const loadingData = () => ({
  type: LOADING_DATA
});

question from:https://stackoverflow.com/questions/65849464/react-and-redux-proper-way-to-store-loading-state-in-redux

Answer 1

The answer is you shouldn't have a loadingData() Redux action in the first place. Loading or not is, as you correctly pointed out, every component's "local" state, so you should store it appropriately - inside each component's "normal" state.

Redux store is designed for storing the data that is mutual to several components. And whether some component is ready or not is certainly NOT that.