Redux-thunk：API 响应保持未决状态

Question

我正在尝试开发一个应用程序，该应用程序在给定关键字的情况下显示来自 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)
}

然后我的 reducer 会做：

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 是控制台记录操作，然后 Promise 出现，但它始终处于挂起状态。然后我的 receivePhotos action creator 发送到 reducer，我可以看到这是一个 Promise：

我该如何兑现这个承诺？

Answer 1

在下面的代码中，您将承诺分配给 response，然后 console.log 该承诺，然后 return 将 payload 设置为该承诺的操作。

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(receivePhotos(term)); 然后调度该操作，仍然将有效负载作为承诺。也许如果您有可以处理它的中间件，这会起作用。

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

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 unsplashClient = new Unsplash({
  applicationId:
    "id",
  secret: "secret",
  callbackUrl: "callback"
});

export const fetchingPhotos = payload => ({
  type: FETCHING_PHOTOS, payload
});

export const setPhotos = payload => ({
  type: SET_PHOTOS, payload
});

export const fetchPhotos = term => dispatch => {
  dispatch(fetchingPhotos(true));
  return unsplashClient.search
    .photos(term, 1, 20)
    .then(toJson)
    .then(json => {
      dispatch(setPhotos(json));
      dispatch(fetchingPhotos(false));
    });
}

Redux-thunk：API 响应保持未决状态

Redux-thunk: API response keeps pending

javascript

redux

redux-thunk