title: Redux is run first
body: <p>I am using redux to manage the global state of my app.</p>
  <p>I have the global state &quot;shop&quot; and change its value through &quot;onFilterShops&quot;.</p>
  <pre><code>const mapStateToProps = ({ shops }) =&gt; {
      return {
          shops: shops.shops
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          onFilterShops: shop =&gt; dispatch(filterShops(shop))
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(MenuShop)
  </code></pre>
  <p>Changing this state runs a filter in my app and takes a few seconds, so I want to display a Spinner during this process.</p>
  <pre><code>const toggleMenu = index =&gt; {
          setIsLoading(true) //Local state, Spinner visible - Line 1
          props.onFilterShops(index) // Line 2
          setIsLoading(false) //Local state, Spinner invisible - Line 3
      }
  </code></pre>
  <p>The problem is that first line 2 is executed, the filter is done and at the end of the filter, line 1 and line 3 are executed and the Spinner has no chance of appearing.</p>
  <p>If I put a promise in the middle it works, but it's ugly.</p>
  <pre><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms))
  const toggleMenu = async (index) =&gt; {
          setIsLoading(true)
          await wait(1)
          props.onFilterShops(index)
          setIsLoading(false)
      }
  </code></pre>
  <p>Why?</p>