Reduxの-佐賀アップロードファイルprogressイベント

Question

私はファイルをアップロードするReduxの-サガを使用していますが、私がアップロードの進行状況が変化するたびにイベントを送出するための方法を把握しようとしています

：

const data = new FormData(); 

data.append('file', fileWrapper.file); 

const uploadedFile = yield call(request, requestURL, { 
    method: 'POST', 
    headers: { 
    'X-Requested-With': 'XMLHttpRequest' 
    }, 
    body: data 
}); 

任意のアイデアはどのように接続しますアップロード進捗イベント？

Answer 1

まずは、あなたはどのようにuploadRequestを行うかによって答えが異なります。

window.fetch APIを使用しているようです。このAPIでは、アップロードの進捗状況を受け取る方法は提供されていません。

したがって、XMLHttpRequestまたは便利な方法でそれをラップするライブラリを使用するように切り替える必要があります。 axiosとsuperagentを見ることをお勧めします。両方とも、進行状況イベントを聞く方法を提供します。

次のトピックは、進捗アクションをredux-sagaにディスパッチする方法です。フォークされた非同期タスクを作成し、そこにアクションをディスパッチするには、forkを使用する必要があります。

function uploadEmitter(action) { 
    return eventChannel(emit => { 
    superagent 
     .post('/api/file') 
     .send(action.data) 
     .on('progress', function(e) { 
      emit(e); 
     }); 
    }); 
} 

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

function* uploadSaga(action) { 
    const emitter = uploadEmitter() 
    yield fork(progressListener, emitter) 
    const result = yield call(identity(promise)) 
    yield put({ type: 'SUCCESS', payload: result }) 
} 

出典：https://github.com/redux-saga/redux-saga/issues/613#issuecomment-258384017

P.S.私の個人的な意見では、redux-sagaはこの種の機能を実装するのに適切なツールではありません。 redux-thunk：

function uploadAction(file) { 
    return dispatch => { 
    superagent 
     .post('/api/file') 
     .send(action.data) 
     .on('progress', function(event) { 
      dispatch({type: 'UPLOAD_PROGRESS', event}); 
     }) 
     .end(function(res) { 
      if(res.ok) { 
       dispatch({type: 'UPLOAD_SUCCESS', res}); 
      } else { 
       dispatch({type: 'UPLOAD_FAILURE', res}); 
      } 
     }); 
    } 
}