реагировать Redux асинхронной действие вызова следующей функции после завершения функции

Question

Допустим, у меня есть functin, вызывающую апи:

export default function AuthApi({url, method, headers, data}={}){ 
    return (dispatch, getState) => { 

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

    } 
} 

Теперь я хочу, чтобы вызвать эту апи где-то в действии:

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

Здесь Я вызываю api с dispatch, а затем dispatch(userInfo). Я предполагаю, что моя dispatch(userInfo()) функции, которая будет вызвана после всей обработки в dispatch(AuthApi())

Но вот он идет в AuthApi(), но не закончив его, что начинает вызывать другие функции или процесс

Как я могу назвать мою другую функцию или логика или когда-либо console.log() после dispatch(AuthApi()) полностью завершена.

Спасибо

Answer 1

Вы можете использовать посылы, они работают отлично с thunkMiddleware:

dispatch(AuthApi({url: "some_url", method: "POST", data: data})).then((response) => { 
    dispatch(userInfo(response)) 
}) 

More examples here

UPDATE Вы должны также изменить действие для возврата обещание.

export default function AuthApi({url, method, headers, data}={}){ 
    return (dispatch, getState) => {  
     return fetch(url, { 
      method: method || null, 
      headers: headers || null, 
      body: form || null, 
     }).then(function(response) { 
      return response.json(); 
     })  
    } 
}