有承诺的Redux-thunk不起作用

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行Uncaught TypeError: Cannot read property 'then' of undefined 。 Promise已正确返回，不是吗？ 我做错什么了吗？ 我已经仔细查看了thunk-redux的示例，但是我仍然找不到错误的地方。

更新 。 这是要求：

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