react redux async action call next function after finishing the function
<p>Lets say I have a functin that calls api:</p>

<pre><code>export default function AuthApi({url, method, headers, data}={}){
    return (dispatch, getState) =&gt; {

        fetch(url, {
            method: method || null,
            headers: headers || null,
            body: form || null,
            }).then(function(response) {
                return response.json();
            }).then(function(response){
                console.log(response)
            })

    }
}
</code></pre>

<p>Now I want to call this api somewhere in action:</p>

<pre><code>      dispatch(AuthApi({url: "some_url", method: "POST", data: data}))
      console.log("called api")
      dispatch(userInfo(response))
      console.log(getState())
      router.pushState(null, '/profile')
</code></pre>

<p>Here I am calling the api with <code>dispatch</code> and then <code>dispatch(userInfo)</code> .
I assume my <code>dispatch(userInfo())</code> function to be called after all the processing in <code>dispatch(AuthApi())</code></p>

<p>But here it goes into <code>AuthApi()</code> but without completing it it start to call other function or process</p>

<p>How can I only call my other function or logic or ever <code>console.log()</code> after <code>dispatch(AuthApi())</code> is completely finished.</p>

<p>Thank you</p>