在react-redux-promise應用程序中解析XML

我的應用程序的數據源僅提供XML格式的數據。在react-redux-promise應用程序中解析XML

我使用axios來獲取XML數據。它以結果的數據部分中的字符串結尾。

我試圖用xml2js來轉換它，但它只是關閉一個異步作業並返回，所以我沒有得到redux-promise middelware的工作。減速器將數據發送給應該呈現它的組件時，有效載荷就是無用的。

不知道這是否有意義，但我可以讓Reducer等待新的函數調用在發送組件上的數據之前返回？

行動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 
    } 
}

我減速

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

來源

2016-06-30 Endre

我知道減速碼不正確，因爲它返回未轉換的XML字符串，但我應該返回什麼？或者我可以停止減速器返回，直到parseString函數返回？ – Endre

減速器不應解析。減速機採取行動，舊國家建立新的狀態。它的工作不是獲取或轉換任何東西。如果你可以暫停你的reducer，你想鎖定整個瀏覽器頁面直到完成？等待，直到您準備好所有數據，然後發送操作將其置於您的應用程序狀態。這包括對數據的異步分析。 – DDS

使用Redux-Thunk進行異步操作。或使用Redux-Saga（準備學習曲線）。 – DDS

你應該改變你的行動的創建者代碼，因爲愛可信是異步。並在收到數據後調度行動。減速機中不需要此邏輯。對於異步操作，你可以使用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; 
}

你也可能需要了解提取過程：裝載，成功，failure.Then行動的創建者可能看起來像：

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

};

來源

2016-06-30 12:27:02

謝謝。這幫助我繼續前進:)很好的解釋。 – Endre

歡迎您）您可以通過這個[聊天]在線詢問任何問題（https://discordapp.com/channels/102860784329052160/103538784460615680） –

我的確是同樣的問題，我很掙扎，讓我改變我的代碼。謝謝。 – kobe

在react-redux-promise應用程序中解析XML

回答

相關問題