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

Posted 2023-02-22

【中文标题】带有承诺的 Redux-thunk 不起作用

【英文标题】：Redux-thunk with promise does not work

【发布时间】：2017-01-20 03:44:38

【问题描述】：

我正在尝试使用 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;

【问题讨论】：

能否提供请求功能

@Utro 我已经用请求函数更新了我的问题。

【参考方案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

【讨论】：

我明白了你的想法并尝试了它，但我认为这不是最好的方法。我决定关注redux-sage，但似乎需要学习很多东西。谢谢！