带有承诺的 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
      });
    });
  }
};

和加载设备：

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 行。 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 没有返回你的承诺。它实际上返回调度的动作本身。 (reference)。

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