title: React + Redux: Wait for async action resolves
body: <p>I'm new into the React and Redux worlds and after a lot of research, I haven't found a way to handle the problem I have:</p>
  
  <p>I need to perform an api call on app init, but the endpoint is in a configuration file. This configuration in the server so it has to be downloaded and read. This is because I need to distribute the app into many servers and each server has a different configuration. </p>
  
  <p>Therefore the api call has to wait until the configuration has been loaded, they must be chained. </p>
  
  <p>I'm using Redux to manage the state of the app so I have an action which downloads the configuration and an other action which performs the api call. </p>
  
  <pre class="lang-js prettyprint-override"><code>// Config action
  export function fetchConfigRequest() {
      return {
          type: types.FETCH_CONFIG_REQUEST
      }
  }
  
  export function fetchConfigSuccess(config) {
      return {
          type: types.FETCH_CONFIG_SUCCESS,
          config
      }
  }
  
  export function fetchConfig() {
      return dispatch =&gt; {
          dispatch(fetchConfigRequest());
  
          return axios.get('config.json')
              .then(response =&gt; {
                  dispatch(fetchConfigSuccess(response.data));
              })
          ;
      };
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Api client action
  export function fetchDataRequest() {
      return {
          type: types.FETCH_DATA_REQUEST
      }
  }
  
  export function fetchDataSuccess(data) {
      return {
          type: types.FETCH_DATA_SUCCESS,
          data
      }
  }
  
  export function fetchDataError(error) {
      return {
          type: types.FETCH_DATA_ERROR,
          error
      }
  }
  
  export function fetchData(filters = {}) {
  
      return dispatch =&gt; {
  
          dispatch(fetchDataRequest());
  
          const apiClient = new apiClient({
              url: state.config.apiEndpoint
          });
  
          return apiClient.Request()
              .then(response =&gt; {
                  dispatch(fetchDataSuccess(data));
              })
          ;
      };
  }
  </code></pre>
  
  <p>The only way that I got it working is by waiting until config action promise resolves in App component like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>// App.component.js
  componentDidMount() {
      this.props.fetchConfig().then(() =&gt; {
          this.props.fetchData();
      });
  }
  </code></pre>
  
  <p>But I don't think this is the best and the most "Redux style" way to do it, so how should I do it?  </p>
  
  <p>I've some ideas in my mind but I don't know what would be the best one:</p>
  
  <ul>
  <li>Keep it as it is now</li>
  <li>Create an 'app' action which dispatches the fetch config action, waits until config is loaded, and then dispatches the fetch data action</li>
  <li>Do it into a custom middleware</li>
  </ul>
  
  <p>Thanks!</p>