REDUX THUNK ASYNC AWAIT to return a Promise middleware

Question

I have a problem, i am using redux thunk as my API middleware, and it works fine when it just updates the redux state. However there are parts of my codes that require me to get an response from the request API rather than waiting for it to go through the redux store.. How can i "Promisify" this part ?

my code for calling the api with axios:

export async function callApi(apiRoutes, method, params) {
  method = method.toUpperCase();
  let apiArr = apiRoutes.split('/')
  let newApiRoute = await Promise.all(apiArr.map(async (queryBreakDown, index) => {
    let value
    if (queryBreakDown.indexOf(':') > -1) {
      queryBreakDown = queryBreakDown.replace(':', '');
      if (!params) throw Error('No Params');
      value = params[`${queryBreakDown}`];
      delete params[`${queryBreakDown}`];
      return value;
    } else {
      value = queryBreakDown
    }
    return value
  }))
  newApiRoute = await newApiRoute.join('/')

  // NOTE: add pagination queries
  if (params && params.count) {
    newApiRoute += '?count=' + params.count
    delete params.count
    if (params.page) {
      newApiRoute += '&page=' + params.page
      delete params.page
    }
    //NOTE: add filters to query
    if (params.filter) {
      for (var property in params.filter) {
        newApiRoute += `&filter[${property}]=` + params.filter[`${property}`]
      }
      delete params.filter
    }
  }

  // NOTE: add file upload queries
  if (params && params.fileType && !params.count) {
    newApiRoute += '?fileType=' + params.fileType
    delete params.fileType
  }

  let data = params ? params : null
  // cookie.set('user_token', '123123123');
  // cookie.remove('user_token', { path: '' });
  let accessToken = cookie.get('user_token');
  let headers = {};
  if (accessToken) {
    headers['Authorization'] = `Bearer ${accessToken}`;
  }
    headers['Content-Type'] =  'application/json';
  const response = await axios({
    method: method,
    baseURL: host + '/api',
    url: newApiRoute,
    headers,
    data
  });

  return response
}

my redux thunk api middleware:

export default store => next => (action) => {

  const apiRoutes = action[CALL_API];


  const { method, types, params } = action;

  next({ type: types[0] });

  return callApi(apiRoutes, method, params).then(
    response => next({
      response,
      type: types[1],
    }), error => next({
      error: (error && error.message) || 'Something bad happened',
      type: types[2]
    })
  )
}

the function that i need to get a return value immediately from, where getS3UploadUrl is dispatching getS3UploadUrl to the api middleware:

  let signedURL = getS3UploadUrl({
      fileType: compressedImage.type
    })

probably i need an return value for signedURL as the API request's response

However, signedURL is undefined.

DarkArtistry DarkArtistry · Accepted Answer · 2019-03-14T08:27:57

function mapDispatchToProps (dispatch) {
  return {
    getS3UploadUrl: function(params) {
      return dispatch(getS3UploadUrl(params))
    }
  }
}

i did not keyed in the RETURN for the dispatch OMG .. face palm.

Also, i notice that it would be better if my callApi function would be synchronous instead of async

REDUX THUNK ASYNC AWAIT to return a Promise middleware

1 Answers