带有承诺的 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 行。 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 你的承诺。它实际上是 return 调度的动作本身。 (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

带有承诺的 Redux-thunk 不起作用

Redux-thunk with promise does not work

javascript

redux

redux-thunk

react-redux

例子