title: Awaiting Redux Action w/ React Hooks
body: <p>I'm trying to handle a form submission to show a loading component when the data fetch is occuring. I'd like to display the data when it's been loaded into my <code>Redux</code> store.</p>
  
  <p>Right now, I've set up my component to use <code>React</code> hooks. While the data loads into my <code>redux</code> store successfully, I'm not sure how to "await" the result of the action being completed. Here's a simplified version of what my component looks like:</p>
  
  <pre><code>const DataPage = (props) =&gt; {
  
      const [isLoading, setIsLoading] = useState(false);
      const [isError, setError] = useState(false);
  
      useEffect(() =&gt; { // Reset Filters when dataSource changes...
          setError(false);
          setIsLoading(false);
      }, [dataSource]);
  
      const handleSubmit = (e, { dataSource }) =&gt; {
  
          e.preventDefault();
          setError(false)
          setIsLoading(true);
  
           //// IDEALLY THIS IS WHERE THE FIX WOULD GO? TURN THIS INTO ASYNC/AWAIT?
          props.fetchData({ dataSource, token: localStorage.JWT_TOKEN });
      };
  
      return (    
          &lt;div className="dataPage"&gt;
              &lt;form className="dataPage__filters" onSubmit={(e) =&gt; handleSubmit(e, { dataSource })}&gt;
                  &lt;DataSelector dataSource={dataSource} setDataSource={setDataSource}/&gt;
                  &lt;button className="button"&gt;
                     Search
                  &lt;/button&gt;
              &lt;/form&gt;
              {isError &amp;&amp; &lt;div&gt;Something went wrong...&lt;/div&gt;}
              { isLoading ? ( &lt;div&gt;...Loading &lt;/div&gt; ) : (
                  &lt;div className="dataPage__table"&gt;
                      &lt;DataTable /&gt; // This is connected to my redux-store separately through 'connect'
                  &lt;/div&gt;
              )}
          &lt;/div&gt;
      );
  };
  
  const mapDispatchToProps = (dispatch) =&gt; ({
      fetchData: ({ dataSource, token }) =&gt; dispatch(startFetchData({ dataSource, token }))
  });
  
  export default connect(null, mapDispatchToProps)(DataPage);
  </code></pre>
  
  <p>The relevant actions (<code>startFetchData</code>, and <code>setData</code>) are located in another file, and look like this:</p>
  
  <pre><code>export const setData = (data) =&gt; ({
      type: "SET_DATA",
      data
  });
  
  export const startFetchData = ({ dataSource, filter, filterTarget, token }) =&gt; {
      return (dispatch) =&gt; {
  
          axios.get(`${'http://localhost:8081'}/api/${dataSource}`, { headers: { authorization: token }})
          .then((res) =&gt; {
              dispatch(setData(result));
          });
      }
  };
  </code></pre>
  
  <p>I'd like to be able to do this without introducing any new dependencies if possible.</p>