title: React + Redux + Redux Saga - best way to handle loading flag
body: <p>I have a basic component which displays list of users, when component is mounted I am using <code>useEffect</code> to make an API call which will load the data, while data is loading I want to show loader in the UI.</p>
  
  <p>My understanding is that the <strong>loader flag should remain in react component's state</strong> as it represents state of that component and <strong>not in redux store because redux store represents/saves state of entire application</strong> 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 ?</p>
  
  <p>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?</p>
  
  <p>If no, then what's the easiest way to achieve this ?</p>
  
  <p>React Component</p>
  
  <pre><code>function List(props) {
      const [loading, setLoading] = useState(false);
      const reduxData = useSelector((store) =&gt; {
          return {
              users: store.users.list,
          };
      });
  
      useEffect(() =&gt; {
          //show loader
          setLoading(true);
          //wait until data is loaded
          props.requestRequests();
          // hide loader
          setLoading(false);
      }, []);
  
      if (loading) {
          return (
             &lt;Loader /&gt;
          )
      }
  
      return (
          &lt;Table users={reduxData.users} /&gt;
      );
  }
  </code></pre>