Javascript 在react redux promise应用程序中解析XML

我的应用程序的数据源仅提供XML格式的数据

我使用axios获取XML数据。它在结果的数据部分以字符串结束

我曾尝试使用xml2js对其进行转换，但它只是触发一个异步作业并返回，因此我无法让redux promise中间件正常工作。当减速器将数据发送到应该呈现数据的组件时，有效负载为零

不确定这是否有意义，但我可以让reducer在发送组件上的数据之前等待新函数调用返回吗

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

---

您应该更改动作创建者代码，因为axios是异步的。并在收到数据后发送操作。 在reducer中不需要这种逻辑。 对于异步操作，您可以使用

此外，您可能需要了解获取过程：加载、成功、失败。然后action creator可能看起来像：

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

};

---

我知道reducer代码不正确，因为它返回未转换的XML字符串，但我应该返回什么？或者在parseString函数返回之前，我可以阻止reducer返回吗？reducer不应该解析。减速器执行一个动作，使旧状态变为新状态。它的工作不是获取或转换任何东西。如果可以暂停reducer，是否要锁定整个浏览器页面直到完成？等待所有数据准备就绪，然后才发送操作将其置于应用程序状态。这包括数据的异步解析。使用Redux Thunk进行异步操作。或者使用Redux Saga（为学习曲线做好准备）。在您的reducer中，FETCH_数据应该返回…状态优先，而不是最后。所以它应该是

return[…state，action.payload.data]

您的更新状态正在被旧状态覆盖谢谢。这在我的路上帮了我更进一步：）很好的解释。欢迎你）你可以在网上问任何关于这个矿的问题。完全是同一个问题，我正在努力，让我这样修改我的代码。谢谢。@Utro，我的也是同样的问题，但它的现有代码和它使用的是promise，导出函数getXmlData（）{debug（'starting action'）；返回{type:'GET_XML_DATA'，promise:request.GET（API_URL）}；你能告诉我该怎么改变它吗？

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

};