How to avoid race conditions when fetching data with Redux?
<p>We have an action that fetches an object async, let's call it <code>getPostDetails</code>, that takes a parameter of which post to fetch by
an id. The user is presented with a list of posts and can click on one to get some details.</p>

<p>If a user clicks on "Post #1", we dispatch a <code>GET_POST</code> action which might look something like this.</p>

<pre><code>const getPostDetails = (id) =&gt; ({
  type: c.GET_POST_DETAILS,
  promise: (http) =&gt; http.get(`http://example.com/posts/#${id}`),
  returnKey: 'facebookData'
})
</code></pre>

<p>This is picked up by a middleware, which adds a success handler to the promise, which will call an action like
<code>GET_POST__OK</code> with the deserialized JSON object. The reducer sees this object and applies it to a store. A typical
<code>__OK</code> reducer looks like this.</p>

<pre><code>[c.GET_ALL__OK]: (state, response) =&gt; assign(state, {
  currentPost: response.postDetails
})
</code></pre>

<p>Later down the line we have a component that looks at <code>currentPost</code> and displays the details for the current post.</p>

<p>However, we have a race condition. If a user submits two <code>GET_POST_DETAILS</code> actions one right after the other, there is
no guarantee what order we recieve the <code>__OK</code> actions in, if the second http request finishes before the first, the
state will become incorrect.</p>

<pre><code>    Action                   =&gt; Result
    ---------------------------------------------------------------------------------
|T| User Clicks Post #1      =&gt; GET_POST for #1 dispatched =&gt; Http Request #1 pending
|i| User Clicks Post #2      =&gt; GET_POST for #2 dispatched =&gt; Http Request #2 pending
|m| Http Request #2 Resolves =&gt; Results for #2 added to state
|e| Http Request #1 Resolves =&gt; Results for #1 added to state
 V
</code></pre>

<p>How can we make sure the last item the user clicked always will take priority?</p>