title: Promise chaining to a possibly resolved promise
body: <p>I have an application which, depending on the state of the form, on submit, may have to make 0-3 API calls. 1 of those calls is dependent on what we can call the root call, such that if the root call is still resolving then we would need to wait for it to finish and return that data from the API before calling the dependent call. So:</p>
  <ol>
  <li>Root call</li>
  <li>Dependent call</li>
  <li>Call 3</li>
  </ol>
  <p>This is a React/Redux project. I could track which calls are in the process of &quot;submitting&quot; in a redux store and if the root call is &quot;submitting&quot; I could setup a <code>setInterval</code> to check if it's resolved before firing off the dependent call. Since this file is outside of a react component, to implement the aforementioned method, I would have to import the store and depend on the <code>store.getState()</code> method to check the state of the store which may have just been changed in a previous if block when the action called within it sends an update to the reducer. Would calling <code>getState</code> directly after firing off an async action reflect the correctly updated state?</p>
  <p>As an alternative, what if I stored the most recent call in a global variable in the api file, and then naively chained a callback to it, like this:</p>
  <p>api.js</p>
  <pre><code>let currentRootCall = Promise.resolve(null);
  
  function setCurrentRootCall(call) {
    currentRootCall = call;
  }
  
  export default function submit(values){
    ...
    if (willSubmitRootCall) {
      rootCall = doRootCall(values);
      setCurrentRootCall(rootCall);
    } else {
      rootCall = currentRootCall;
    }
    ...
    if (willSubmitDependentCall) {
      rootCall.then(() =&gt; doDependentCall(values));
    }
    if (willSubmit3rdCall) {
      thirdCall = do3rdCall(values);
    } else {
      thirdCall = Promise.resolve(null);
    }
    ...
    return Promise.allSettled([rootCall, thirdCall])
      .then(...) // fire off call completed actions for each of the 3 calls in the redux stores
  }
  </code></pre>
  <p>This would save me the headache of polling the redux store to see if the call completed and then having to clean up the interval. It is my understanding that chaining to a resolved promise will just immediately fire off the chained callback. I feel as though I'm missing something here.</p>
  <p>4 questions:</p>
  <ul>
  <li>Is there a problem with this Promise chaining approach?</li>
  <li>Will naively chaining to a possibly already resolved Promise cause
  problems? How about with <code>Promise.allSettled</code>?</li>
  <li>In the polling redux store method, would calling <code>getState</code> on the store directly after calling an async action reflect the updated state?</li>
  <li>Is there a better way?</li>
  </ul>
  <p>FYI: I am using <code>axios</code> library to make these calls.</p>