Redux-сага событие прогресса загрузить файл

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.

Похоже, вы используете API window.fetch. Этот 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}); 
      } 
     }); 
    } 
}