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

Posted 2023-02-22

【中文标题】在 react-redux-promise 应用程序中解析 XML

【英文标题】：Parse XML in react-redux-promise app

【发布时间】：2016-11-02 12:11:44

【问题描述】：

我的应用的数据源只提供 XML 格式的数据。

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

我尝试使用 xml2js 对其进行转换，但它只是触发异步作业并返回，所以我没有让 redux-promise middelware 工作。当 reducer 将数据发送到应该渲染它的组件时，有效负载什么都不是。

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

动作索引.js

export function fetchData(jobid, dest) 
    const url = `$DATA_URLjobid=$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;

【问题讨论】：

我知道reducer 代码不正确，因为它返回未转换的XML 字符串，但我应该返回什么？或者我可以阻止减速器返回，直到 parseString 函数返回？

reducer 不应该解析。 reducer 采取行动和旧状态以形成新状态。它的工作不是获取或转换任何东西。如果你可以暂停你的 reducer，你会想要锁定整个浏览器页面直到它完成吗？等到您准备好所有数据，然后再发送一个操作以将其放入您的应用程序状态。这包括数据的异步解析。

使用 Redux-Thunk 进行异步操作。或者使用 Redux-Saga（准备好学习曲线）。

在你的 reducer 中，FETCH_DATA 应该首先返回 ...state，而不是最后一个。所以应该是return [...state, action.payload.data]你的更新状态被旧状态覆盖

【参考方案1】：

您应该更改您的操作创建者代码，因为 axios 是异步的。并在接收数据后调度动作。 你在 reducer 中不需要这个逻辑。 对于异步操作，您可以使用 redux-thunk

export const fetchData = (jobid, dest)=>dispatch =>
    const url = `$DATA_URLjobid=$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;

您可能还需要了解获取过程：加载、成功、失败。然后动作创建者可能如下所示：

export const fetchData = (jobid, dest)=>dispatch =>
 const url = `$DATA_URLjobid=$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)
    )

;

【讨论】：

谢谢。这对我有帮助：）很好的解释。

不客气）您可以在此chat在线提出任何问题

我的是完全相同的问题，我正在苦苦挣扎，让我以这种方式更改我的代码。谢谢。

@Utro，我的也是同样的问题，但是它的现有代码和它使用了promise，export function getXmlData() debug('starting action'); return type: 'GET_XML_DATA', promise: request.get(API_URL) ;

你能告诉我承诺我应该如何改变它吗？