Wie APIs in Containern aufgerufen werden und Reaktion auf Präsentationsrequisiten in React/Redux übergeben?

Question

Ich folge davezuko ist reagieren-redux Beispiel: https://github.com/davezuko/react-redux-starter-kit

Großen Starter-Kit für sicher, aber ich habe einige Fragen, mit denen die nächsten einfachen Aufgabe betrachten.

Ich habe eine REST API senden Json Daten über GET. Ich möchte die Daten übernehmen und über Requisiten an die Präsentationskomponente weitergeben. Ich habe kein Problem damit, die Ajax-Call-Action-Funktion über Requisiten zu senden und auszuführen, kann aber nicht die optimale (und bewährte) Methode finden, um nur abgerufene Json-Daten bei Erfolg weiterzuleiten.

Ich folge Redux-Dokumenten und Beispielen, aber es gibt einige Änderungen mit meinem Starter-Kit.

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

Der richtige Weg, dies zu tun

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