如何在容器中调用API并将响应传递给React / Redux中的表示道具?

时间:2017-05-30 12:47:57

标签: reactjs react-redux redux-thunk

我正在关注davezuko的react-redux样本:https://github.com/davezuko/react-redux-starter-kit

非常棒的入门套件,但考虑到下一个简单的任务,我面临一些问题。

我有一个REST API通过GET发送json数据。我想获取数据,并通过道具将其传递给演示组件。我没有问题通过道具发送ajax调用动作函数并执行它,但是找不到最佳(和最佳实践)方法来成功传递检索到的json数据。

我正在关注Redux文档和示例,但我的入门套件有一些变化。

ACTION:

export const getDetectedPersonList = () => {
  return (dispatch, getState) => {    
    //return {
      dispatch({
        type  : GET_DETECTED_PERSON_LIST,
        payload : fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
          .then(function(response) {
            if (response.status >= 400) {
              console.log("Error " + response.status + " in the AJAX call")
              throw new Error("Bad response from server");
            }
              return response.json();
            })
            //.then(function(detections) {  })       
        })
      //}
    }
  }

1 个答案:

答案 0 :(得分:0)

正确的方法是

export const getDetectedPersonList = () => {
    return (dispatch, getState) => {    
        return fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
                    .then(function(response) {
                        if (response.status >= 400) {
                            console.log("Error " + response.status + " in the AJAX call")
                            throw new Error("Bad response from server");
                        }
                        dispatch({
                            type  : GET_DETECTED_PERSON_LIST,
                            payload : response.json()
                        }); 
                    })
                    .catch(function(error) {
                        dispatch({
                            type  : ERROR_PERSON_LIST,
                            payload : error
                        }); 
                    });
    });
}