Comment appeler des API dans des conteneurs et transmettre une réponse aux accessoires de présentation, dans React/Redux?

Question

Je suis l'échantillon reac-redux de davezuko: https://github.com/davezuko/react-redux-starter-kit

Super kit de démarrage, c'est sûr, mais je suis confronté à quelques problèmes compte tenu de la prochaine tâche simple.

J'ai une API REST qui envoie des données json via GET. Je veux prendre les données et les transmettre au composant de présentation via les accessoires. Je n'ai aucun problème à envoyer la fonction d'action ajax via les accessoires, et je l'exécute, mais je ne trouve pas le moyen optimal (et le meilleur) de transmettre uniquement les données json récupérées en cas de succès. Je suis des docs et des exemples de Redux, mais il y a quelques changements avec mon kit de démarrage.

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

Answer 1

La bonne façon de le faire serait

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 
         }); 
        }); 
    }); 
}