2

アプリのデータ ソースは、XML 形式のデータのみを提供します。

axios を使用して XML データを取得します。結果のデータ セクションに文字列として表示されます。

xml2jsを使用して変換しようとしましたが、非同期ジョブを起動して戻るだけなので、redux-promiseミドルウェアが機能しません。レデューサーがデータをレンダリングする必要があるコンポーネントにデータを送信するとき、ペイロードは何もありません。

これが理にかなっているかどうかはわかりませんが、コンポーネントでデータを送信する前に、新しい関数呼び出しが戻るのをレデューサーに待機させることはできますか?

アクション 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;
}
4

1 に答える 1

3

axios は非同期であるため、アクション作成コードを変更する必要があります。そして、データ受信後のディスパッチアクション。レデューサーではこのロジックは必要ありません。非同期アクションの場合、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;
}

また、取得プロセスについて知る必要がある場合があります: 読み込み、成功、失敗。その後、アクション作成者は次のようになります。

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-30T12:27:02.303 に答える