如何使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行（第一个Toast消息），然后仅在完成API调用后才显示第二个Toast。