Reduxサガ、アキシャス、進捗イベント

Question

一緒にアキソシスを使用して進捗状況を確認するクリーン/ショート/この機能は、約束を返さ

function upload(payload, onProgress) { 
    const url = '/sources/upload'; 

    const data = new FormData(); 

    data.append('source', payload.file, payload.file.name); 

    const config = { 
    onUploadProgress: onProgress, 
    withCredentials: true 
    }; 

    return axios.post(url, data, config); 
} 

：

は、私は次のアップロード機能を持っていると仮定します。

また、私は佐賀を持っている：

function* uploadSaga(action) { 
    try { 
    const response = yield call(upload, payload, [?? anyProgressFunction ??]); 
    yield put({ type: UPLOADING_SUCCESS, payload: response }); 
    } catch (err) { 
    yield put({ type: UPLOADING_FAIL, payload: err }); 
    } 
} 

は、私が進捗イベントを受信し、サガでそれを載せていきたいと思います。また、私はアクシオス要求の成功（または失敗）結果をキャッチしたい。出来ますか？

ありがとうございました。

Answer 1

私は解答を見つけたので、解説のためにMateusz Burzyńskiに感謝します。

eventChannelを使用する必要がありますが、ちょっとしたことがあります。

私たちは、ファイルアップロードのためのAPI関数があるとします。佐賀で

function upload(payload, onProgress) { 
    const url = '/sources/upload'; 

    const data = new FormData(); 

    data.append('source', payload.file, payload.file.name); 

    const config = { 
    onUploadProgress: onProgress, 
    withCredentials: true 
    }; 

    return axios.post(url, data, config); 
} 

を我々はのEventChannelを作成する必要はなく外部放出置きます。

function createUploader(payload) { 

    let emit; 
    const chan = eventEmitter(emitter => { 

    emit = emitter; 
    return() => {}; // it's necessarily. event channel should 
        // return unsubscribe function. In our case 
        // it's empty function 
    }); 

    const uploadPromise = upload(payload, (event) => { 
    if (event.loaded.total === 1) { 
     emit(END); 
    } 

    emit(event.loaded.total); 
    }); 

    return [ uploadPromise, chan ]; 
} 

function* watchOnProgress(chan) { 
    while (true) { 
    const data = yield take(chan); 
    yield put({ type: 'PROGRESS', payload: data }); 
    } 
} 

function* uploadSource(action) { 
    const [ uploadPromise, chan ] = createUploader(action.payload); 
    yield fork(watchOnProgress, chan); 

    try { 
    const result = yield call(() => uploadPromise); 
    put({ type: 'SUCCESS', payload: result }); 
    } catch (err) { 
    put({ type: 'ERROR', payload: err }); 
    } 
}