Redux-Saga-Upload-Datei Ereignis progress

Question

I redux-Saga bin mit Dateien hochladen und ich versuche, einen Weg zu einem Ereignis zu versenden, wenn die Upload-Fortschritt Änderungen:

const data = new FormData(); 

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

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

Jede Idee, wie ein anhang Upload-Fortschrittsereignis?

Answer 1

Zunächst hängt die Antwort davon ab, wie Sie uploadRequest tun.

Es scheint, als ob Sie window.fetch API verwenden. Diese API bietet keine Möglichkeit, Upload-Fortschrittsereignisse zu erhalten.

Sie müssen also wechseln, um XMLHttpRequest oder eine Bibliothek zu verwenden, die es auf eine bequeme Weise für Sie umschließt. Ich würde Ihnen empfehlen, sich axios und superagent anzusehen. Beide bieten eine Möglichkeit, Fortschrittsereignisse zu hören.

Im nächsten Abschnitt wird beschrieben, wie Fortschrittsaktionen in redux-saga gesendet werden. Sie müssen fork verwenden, um eine verzweigte asynchrone Aufgabe zu erstellen und Aktionen dort auszuführen.

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 }) 
} 

Quelle: https://github.com/redux-saga/redux-saga/issues/613#issuecomment-258384017

P. S. meiner Meinung nach ist redux-saga kein geeignetes Werkzeug, um solche Funktionen zu implementieren. Wäre viel sauberer, dies zu tun mit 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}); 
      } 
     }); 
    } 
}