用承诺来敷衍是行不通的

Question

我正在尝试用redux-thunk链接调度。我有2个动作创建者如下:

getResourceLinks :

export const getResourceLinks = () => {
  return dispatch => {
    let req = {
      url: getRootUrl(),
      header: {
        Accept: 'application/json'
      }
    };
    return request(req).then(res => {
      dispatch({
        type: ActionTypes.RESOURCE.LOAD_URL_SUCCESS,
        payload: res.body
      });
    }).catch(err => {
      dispatch({
        type: ActionTypes.RESOURCE.LOAD_URL_ERROR,
        payload: err
      });
    });
  }
};

和 loadAppliances :

export const loadAppliances = () => {
  return (dispatch, getState) => {
    return dispatch(getResourceLinks()).then(res => {
      const {resources} = getState();
      let req = {
        url: getResourceLink(Resources.Appliances, res.body),
        header: {
          Accept: 'application/json'
        }
      };
      request(req).then(res1 => {
        dispatch({
          type: ActionTypes.APPLIANCE.LOAD_SUCCESS,
          payload: res1.body
        });
      }).catch(err => {
        dispatch({
          type: ActionTypes.APPLIANCE.LOAD_ERROR,
          payload: err
        });
      });
    });
  };
};

我面临一个错误:Uncaught TypeError: Cannot read property 'then' of undefined在loadAppliances动作的第3行。承诺正确地返回了，不是吗?我做错什么了吗?

我仔细地看了一些例子，但我仍然找不到问题所在。

。这是请求:

import superagent from 'superagent';
import superagentPromisePlugin from 'superagent-promise-plugin';
import {RequestMethods} from '../constant';
const request = ({url, method = RequestMethods.GET, param, body, header}) => {
  let methodStr;
  switch (method) {
    case RequestMethods.POST:
      methodStr = 'POST';
      break;
    case RequestMethods.PUT:
      methodStr = 'PUT';
      break;
    case RequestMethods.DELETE:
      methodStr = 'DELETE';
      break;
    default:
      methodStr = 'GET';
      break;
  }
  let req = superagent(methodStr, url).use(superagentPromisePlugin);
  //set header
  if (header) {
    req.set(header)
  }
  //set param
  if (param) {
    req.query(param)
  }
  //set body
  if (body) {
    req.send(body)
  }
  return req;
};
export default request;

Answer 1

这里的问题是dispatch没有返回您的承诺。它实际上返回分派的动作本身。(参考).

return dispatch(getResourceLinks()).then(res => {
                                   ^--- this is the problem

我的方法是在第一次成功调用后调度一个操作，并在状态中存储任何相关信息，然后调度下一个调用并存储其响应。

<标题> 例子

const getResourceLinks = () => {
  return request({
    url: getRootUrl(),
    header: {
      Accept: 'application/json'
    }
  });
};
const getAppliances = (appliances) => {
  return request({
    url: getResourceLink(Resources.Appliances, appliances),
    header: {
      Accept: 'application/json'
    }
  })
};
export const loadAppliances = () => {
  return (dispatch, getState) => {
    getResourceLinks()
      .then(res => {
        dispatch({
          type: ActionTypes.RESOURCE.LOAD_URL_SUCCESS,
          payload: res.body
        });
        return getAppliances(res.body)
          .then(res1 => {
            dispatch({
              type: ActionTypes.APPLIANCE.LOAD_SUCCESS,
              payload: res1.body
            });
          })
          .catch(err => {
            dispatch({
              type: ActionTypes.APPLIANCE.LOAD_ERROR,
              payload: err
            });
          });
      })
      .catch(err => {
        dispatch({
          type: ActionTypes.RESOURCE.LOAD_URL_ERROR,
          payload: err
        });
      });
  }
}

你可能还想看看redux-saga