在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

回答

相关问题