XML in react-redux-promise-App parsen

Question

Die Datenquelle für meine App bietet nur Daten im XML-Format.

Ich benutze Axios, um die XML-Daten zu erhalten. Es endet als eine Zeichenfolge in dem Datenabschnitt des Ergebnisses.

Ich habe versucht, xml2js zu verwenden, um es zu konvertieren, aber es löst nur einen asynchronen Job und kehrt zurück, so dass ich nicht die Redux-Versprechen Middelware funktioniert. Die Nutzlast ist nichts, wenn die Reduzierer die Daten an die Komponente senden, die sie rendern soll.

Nicht sicher, ob dies sinnvoll ist, aber kann ich den Reducer warten, bis der neue Funktionsaufruf zurückkommt, bevor er die Daten an die Komponente sendet?

Aktion index.js

export function fetchData(jobid, dest) { 
    const url = `${DATA_URL}jobid=${jobid}&refdist=${dest}`; 
    const request = axios.get(url); 

    console.log(request); 

    return { 
     type: FETCH_DATA, 
     payload: request 
    } 
} 

mein Minderer

export default function (state = [], action) { 
    console.log(action); 

    switch (action.type) { 
     case FETCH_DATA: 
      console.log("pre"); 
      parseString(action.payload.data, function (err, result) { 
       // Do I need some magic here??? or somewhere else? 
       console.dir(result); 
      }); 

     return [action.payload.data, ...state]; 
    } 
    return state; 
} 

Answer 1

Sie Ihre Aktion Schöpfer Code ändern sollte, weil axios async ist. Und versenden Sie die Aktion nach den Empfangsdaten. Sie benötigen diese Logik nicht in Reducer. Für Asynchron-Aktionen können Sie redux-thunk

export const fetchData = (jobid, dest)=>dispatch =>{ 
    const url = `${DATA_URL}jobid=${jobid}&refdist=${dest}`; 

    const request = axios.get(url).then(res=>{ 
     parseString(res, function (err, result) { 
      if(result){ 
       dispatch({ 
        type: FETCH_DATA, 
        data:result 
       }) 
      } 
      if(err) throw err 
     }); 
    }).catch(err=>console.error(error)) 

}; 
///clean reducer 
export default function (state = [], action) { 
    switch (action.type) { 
     case FETCH_DATA: 
     return [...state, action.data ]; 
    } 
    return state; 
} 

Auch verwenden Sie möglicherweise über das Abrufen Prozess wissen: Laden, Erfolg, wie sieht failure.Then Aktion Schöpfer kann:

export const fetchData = (jobid, dest)=>dispatch =>{ 
const url = `${DATA_URL}jobid=${jobid}&refdist=${dest}`; 
    dispatch({ 
     type: FETCH_DATA_REQUEST, 
     data:result, 
     isFetching:true 
    }) 
    const request = axios.get(url).then(res=>{ 
     parseString(res, function (err, result) { 
      if(result){ 
       dispatch({ 
        type: FETCH_DATA_SUCCESS, 
        data:result, 
        isFetching:false 
       }) 
      } 
      if(err) throw err 
     }); 
    }).catch(err=>{ 
     dispatch({ 
      type: FETCH_DATA_FAILURE, 
      err:err, 
      isFetching:false 
     }) 
     console.error(error) 
    }) 

};