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

Question

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

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

我曾尝试使用 xml2js 来转换它，但它只是触发了一个异步作业和 returns，所以我没有让 redux-promise 中间件工作。当 reducers 将数据发送到应该呈现它的组件时，有效负载是空的。

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

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

Answer 1

你应该更改你的动作创建者代码，因为 axios 是异步的。并在收到数据后派发动作。在 reducer 中不需要这个逻辑。对于异步操作，您可以使用 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)
    })

};

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

Parse XML in react-redux-promise app

javascript

reactjs

redux

reducers

redux-promise