Redux и прогресс в обещании

Question

Как я могу обрабатывать и обещать прогресс в сокращении?

Я хочу показать какую-нибудь вращающуюся панель или что-то в то время, когда выполняется обещание, я использую axios для обработки запросов, но у них есть api, чтобы обрабатывать прогресс, который проходит, как это, в объекте конфигурации запроса:

{ 
    progress: function(progressEvent) { 
     // Do whatever you want with the native progress event 
    } 
} 

Но я могу только отправить запрос в действие Redux, как:

return { 
    type: "HTTP_REQUEST", 
    payload: axios.get("/webAPI/data", configObj) 
} 

Как я могу обрабатывать событие прогресса с этими условиями?

Answer 1

Если вы ищете только показание счетчика, а не индикатор хода, вам действительно не нужна функция прогресса. Скорее всего, я бы рекомендовал что-то вдоль этих линий:

const axiosAction = function(configObj) { 
    // We have to thunk the dispatch since this is async - need to use the thunk middleware for this type of construct 
    return dispatch => { 
    /* action to notify the spinner to start (ie, update your store to have a 
    loading property set to true that will presentationally start the spinner) */ 
    dispatch({ 
     type: 'AXIOS_REQUEST_STARTING' 
    }); 
    return axios.get("/webAPI/data", configObj) 
     .then(res => { 
      /* action to set loading to false to stop the spinner, and do something with the res */ 
      return dispatch({ 
      type: 'AXIOS_REQUEST_FINISHED', 
      payload: res, 
      }) 
     }) 
     .catch(err => /* some error handling*/); 
    }; 
} 

Edited добавить ссылку для redux-thunk

Answer 2

Хотя ответ gabdallah является правильным, я чувствую, что это лишь частично отвечает на вопрос. Код из обоих ответов можно легко объединить, если вы этого хотите.

Если вы do хотите показать прогресс пользователю, вы можете отправить конкретные действия прогресса из вашего обратного вызова прогресса, при этом текущий прогресс будет полезен. Что-то вроде этого:

{ 
    progress: function(progressEvent) { 
     return dispatch({ 
      type: "HTTP_REQUEST_PROGRESS", 
      payload: { 
       url: "/webAPI/data", 
       currentBytes: progressEvent.current, 
       totalBytes: progressEvent.total // properties on progressEvent made up by yours truly 
      } 
     }); 
    } 
} 

В сущности, вам просто нужно другое действие, которые представляют request progress, так же, как у вас уже есть действие для инициирования запроса (и, возможно, один как для успешного и неудачного исхода).