Как заставить Redux Saga запускать синхронный код

Question

У меня есть следующий код:

import * as api from '../../services/api'
import { call, put } from 'redux-saga/effects'

function * createProduct ({payload: data}) {
  yield put(showToast('info', 'Creating product...'))
  try {
    let result = yield call(api.createProduct, data)
    if (result.success) {
      yield put({type: 'REDUX_CREATE_PRODUCT_SUCCESS'})
      yield put(showToast('success', "Product created!!"))
    }
  } catch (error) {
  }
}

Мой api.js:

import axios from 'axios'
const instance = axios.create({
  baseURL: 'http://localhost:3022/v2'
})

function createProduct (payload) {
  return instance.post('products', payload).then(({data: result}) => {
    return result
  })
}

Но, похоже, строки 5 и 10 запускаются одновременно. Я имею в виду, я ожидал, что мой код в строке 10 будет запущен только после фактического получения вызова API. Так что это должно занять не менее нескольких миллисекунд.

У меня вопрос: как сделать этот код синхронным, показывая сначала строку 5 (первое сообщение-тост), а затем отображать второй-тост только после завершения вызова API.