Javascript Redux thunk:API响应一直挂起

我正在尝试开发一个应用程序，即在给定关键字的情况下显示来自Unsplash的照片。我设法使用unsplash.js获取特定的照片。在我的动作中，我有几个动作创建者：

export const fetchPhotos = () => ({
  type: FETCH_PHOTOS
});

export const receivePhotos = term => {
  const unsplash = new Unsplash({
    applicationId:
      "id",
    secret: "secret",
    callbackUrl: "callback"
  });
  console.log(term);

  const response = unsplash.search
    .photos(term, 1, 20)
    .then(toJson)
    .then(json => json)
    .then(json => json)

  console.log(response.then(results => results));
  return {
    type: RECEIVE_PHOTOS,
    payload: response
  };
}

export const unsplash = (term) => dispatch => {
  console.log(term);
  dispatch(fetchPhotos());

  setTimeout(() => {
    dispatch(receivePhotos(term));
    console.log("dispatching")
    return Promise.resolve();
  }, 1000)
}

然后，我的减速器执行以下操作：

const initialState = {
  isFetching: false,
  sortDirection: null,
  sortKey: null,
  items: []
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_PHOTOS:
    console.log(state, "Fetch photos reducer");
      return {
        ...state,
        isFetching: true
      };
    case RECEIVE_PHOTOS:
      console.log("Receive photos reducer", action.payload)
      return {
        ...state,
        isFetching: false,
        items: action.payload
      };
    case SET_SORT:
      return {
        ...state,
        sortKey: action.sortKey,
        sortDirection: action.sortDirection
      };
    default:
      return state;
  }
}

然而，当receivePhotos操作创建者调用API时，我有一个承诺需要解决，以使整个应用程序正常工作。我的fetch photos reducer正在控制台记录操作，然后承诺出现，但它始终处于挂起状态。然后我的receivePhotos action creator发送到reducer，我可以看到这是一个承诺：

---

如何解决此承诺？

在下面的代码中，您将承诺分配给

响应

，然后

控制台。记录该承诺，然后将
有效负载设置为该承诺返回操作

const response = unsplash.search
  .photos(term, 1, 20)
  .then(toJson)
  .then(json => json)
  .then(json => json)

console.log(response.then(results => results));
return {
  type: RECEIVE_PHOTOS,
  payload: response
};

发送（接收照片（期限））然后分派该操作，仍然将有效负载作为承诺。如果您有可以处理它的中间件，也许这会起作用

使用dispatch表明您正在使用redux thunk。
在这种情况下，您应该对
receivePhotos
执行相同的操作，包括
fetchPhotos
调用，并取消
unflash
操作

const unsplashClient = new Unsplash({
  applicationId:
    "id",
  secret: "secret",
  callbackUrl: "callback"
});

export const receivePhotos = term => dispatch => {
  dispatch(fetchPhotos());
  return unsplashClient.search
    .photos(term, 1, 20)
    .then(toJson)
    .then(json => dispatch({
      type: RECEIVE_PHOTOS,
      payload: json
    });
}

最后，我建议对操作和（相关的简化程序）进行一些重构，例如：

在下面的代码中，您将承诺分配给
响应
，然后
控制台。记录该承诺，然后将
有效负载
设置为该承诺的操作返回

const response = unsplash.search
  .photos(term, 1, 20)
  .then(toJson)
  .then(json => json)
  .then(json => json)

console.log(response.then(results => results));
return {
  type: RECEIVE_PHOTOS,
  payload: response
};

发送（接收照片（期限））然后分派该操作，仍然将有效负载作为承诺。如果您有可以处理它的中间件，也许这会起作用

使用dispatch表明您正在使用redux thunk。
在这种情况下，您应该对
receivePhotos
执行相同的操作，包括
fetchPhotos
调用，并取消
unflash
操作

const unsplashClient = new Unsplash({
  applicationId:
    "id",
  secret: "secret",
  callbackUrl: "callback"
});

export const receivePhotos = term => dispatch => {
  dispatch(fetchPhotos());
  return unsplashClient.search
    .photos(term, 1, 20)
    .then(toJson)
    .then(json => dispatch({
      type: RECEIVE_PHOTOS,
      payload: json
    });
}

最后，我建议对操作和（相关的简化程序）进行一些重构，例如：