Как вызывать API в контейнерах и передавать ответ презентационным реквизитам в React/Redux?

Я следую образцу реакции-редукции Давезуко: https://github.com/davezuko/react-redux-starter-kit

Отличный стартовый набор, конечно, но я столкнулся с некоторыми проблемами, рассматривая следующую простую задачу.

У меня есть REST API, отправляющий данные json через GET. Я хочу взять данные и передать их презентационному компоненту через реквизит. У меня нет проблем с отправкой функции действия вызова ajax через реквизит и ее выполнением, но я не могу найти оптимальный (и лучший) способ передачи только полученных данных json в случае успеха.

Я следую документам и примерам Redux, но в моем стартовом наборе есть некоторые изменения.

ДЕЙСТВИЕ:

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) {  })       
        })
      //}
    }
  }

reactjs react-redux redux-thunk
person AlexAcc    schedule 30.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Правильный способ сделать это будет

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
                        }); 
                    });
    });
}
person VivekN    schedule 03.06.2017
comment
Но в этом случае вы возвращаете обещание браузеру, оставляя состояние компонента без данных в первый раз и без данных при рендеринге (отладка только регистрирует обещание). Как насчет этой опции (отправка функции .then, когда вы можете убедиться, что браузер отправляет реальный ответ): - person AlexAcc; 05.06.2017