Redux-Thunk with promise不起作用

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在第3行中loadAppliances行動。諾言被正確地返回了，不是嗎？我做錯了什麼嗎？我仔細看過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