React + Redux + Redux Saga - best way to handle loading flag

Question

I have a basic component which displays list of users, when component is mounted I am using useEffect to make an API call which will load the data, while data is loading I want to show loader in the UI.

My understanding is that the loader flag should remain in react component's state as it represents state of that component and not in redux store because redux store represents/saves state of entire application so like logged in user, list of users, etc. and not each possible state of a react component, is this kind of thinking wrong or incorrect from application's architecture point of view ?

My reasoning is that if we are going to store loading flags in redux store then why bother with using react component's state at all and not just use redux store?

If no, then what's the easiest way to achieve this ?

React Component

function List(props) {
    const [loading, setLoading] = useState(false);
    const reduxData = useSelector((store) => {
        return {
            users: store.users.list,
        };
    });

    useEffect(() => {
        //show loader
        setLoading(true);
        //wait until data is loaded
        props.requestRequests();
        // hide loader
        setLoading(false);
    }, []);

    if (loading) {
        return (
           <Loader />
        )
    }

    return (
        <Table users={reduxData.users} />
    );
}

Stayathome

You can try to track request status with a custom reducer and actions. Something like setRequestStatus(requestId, REQUEST_STATUS.LOADING). Mix that with selector and you get a clean and flexible way to know each request status :). – Chandelle

I guess it depends if you want a 'shim' over the entire page while data is loading, or to just cover the component where the data will be displayed. Which one do you want? – Woolcott

just show loader for specific component (not shim over entire page) as I think it makes intuiting which part of UI is waiting for data. – Stayathome

Answer 1

This is more of an opinion question, and it depends how you structure your data loading operations, but in my opinion, if you are offloading your data fetching into something like redux & redux saga then you would offload your loading flags as well.

The reason for this is you are keeping all related concerns together. It doesn't make sense to keep data loading & data loading flags in separate parts of your application. Not only is it more work, but if you keep them together it is much easier to switch out what data gets loaded by what component; it is all one unit.

With that said, what I would do is for every data fetching operation I would have 3 redux actions:

LOAD_DATA_REQUEST // triggers saga and sets redux loading flag to true
// both of the following actions are called by your saga and simultaneously set
// loading flag to false and either set received data in redux or set an error state
LOAD_DATA_SUCCESS
LOAD_DATA_ERROR

Now, from any component that you want, you can just call one single action and the rest is handled from that action.

This is just my opinion and there are multiple "correct" answers, but this is normally how I do it and it has worked well.

Beheld