时间戳

首页 > 解决方案 > REDUX THUNK ASYNC AWAIT 返回一个 Promise 中间件

react-redux - REDUX THUNK ASYNC AWAIT 返回一个 Promise 中间件

问题描述

我有一个问题，我使用 redux thunk 作为我的 API 中间件，当它只更新 redux 状态时它工作正常。但是，我的代码的某些部分要求我从请求 API 获得响应，而不是等待它通过 redux 商店。我如何“承诺”这部分？

我用 axios 调用 api 的代码：

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
}

我的 redux thunk api 中间件：

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]
    })
  )
}

我需要立即获取返回值的函数，getS3UploadUrl 将 getS3UploadUrl 调度到 api 中间件：

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

可能我需要一个 signedURL 的返回值作为 API 请求的响应

但是，signedURL 是未定义的。

标签： react-reduxredux-thunkredux-promise-middleware

解决方案

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

我没有为调度 OMG 键入 RETURN .. 手掌。

另外，我注意到如果我的 callApi 函数是同步的而不是异步的会更好

推荐阅读