Как реализовать индикатор выполнения загрузки файла React с использованием redux и rx js?

Question

Фон : Это микросайт React JS, который мы разрабатываем для отображения статуса CRM. React не взаимодействует с CRM напрямую. Есть JAVA бэкэнд. Какой бы API мы ни вызывали, он проходит через JAVA бэкэнд, который в свою очередь вызывает CRM APis.

Сценарий : нам нужно загрузить фотографию из React JS. Поскольку CRM не хранит фотографии, команда JAVA разработала 1-й UPLOAD-PHOTO-API для загрузки фотографий на Azure и получения в ответ токенов (например, для: "abcdefghijkl"). Эти токены сохраняются в CRM через 2-й UPDATE-DATA-API в виде массива files: ["abcdefghijkl"]. Для рендеринга всех этих фотографий мы вызываем 3-й API, то есть FETCH-API. Мы получаем массив токенов, через который мы oop просматриваем и визуализируем как www.google.com/ {{token}}, и мы отображаем эту фотографию на экране. Все эти асин c действия происходят через Redux и rx js .

Требование : необходимо загружать индикатор выполнения, когда происходит загрузка фотографии

Вот мой кусок кода

<input onChange={this.onChangeHandler}>

this.onChangeHandler будет вызывать действие addPhoto в приставке

Редуктор

reducer: (state, action, { types, phases }) => {
  switch (action.type) {
      case types.ADD_PHOTO:
          return {
              ...state,
              data: {
                  ...state.data,
                  isLoading: true
              }
          }
      case types.FETCH_LIST_OF_PHOTOS_SUCCESS:
          return {
              ...state,
              data: {
                  ...state.data,
                  photos: action.payload,
                  isLoading: false
              }
          };    

      default:
          return state;
  }
},

Создатели

creators: ({ types }) => ({
        fetchListOfPhotos: () => ({ type: types.FETCH_LIST_OF_PHOTOS }),
        fetchListOfPhotosSuccess: (data) => ({ type: types.FETCH_LIST_OF_PHOTOS_SUCCESS, payload: data }),
        fetchListOfPhotosError: (error) => ({ type: types.FETCH_LIST_OF_PHOTOS_ERROR, payload: { error } }),   

        addPhoto: (data) => ({ type: types.ADD_PHOTO, payload: data }),
        addPhotoSuccess: (data) => ({ type: types.ADD_PHOTO_SUCCESS, payload: data }),
        addPhotoError: (error) => ({ type: types.ADD_PHOTO_ERROR, payload: { error } }),

    updatePhoto: (data) => ({ type: types.UPDATE_PHOTO, payload: data }),
    updatePhotoSuccess: (data) => ({ type: types.UPDATE_PHOTO_SUCCESS, payload: data }),
    updatePhotoError: (error) => ({ type: types.UPDATE_PHOTO_ERROR, payload: { error } }),

Действия обрабатываются в файле EPI C:

const addPhoto = action$ => action$.pipe(
    ofType(photoUploadStore.types.ADD_PHOTO),
    switchMap(
        (data) => {   
            const payload = {
                data: {
                    //some data
                }
            };

            return from(API.post(uploadWriteAPI.photoUpload, payload)).pipe(
                map(data => {
                    return photoUploadStore.creators.updatePhoto(data.data.token)
                }),
                catchError(error => of(photoUploadStore.creators.addPhotoError(error)))
            )
        }
    )
);

и функция обновления фотографий выглядит следующим образом:

const updatePhoto = action$ => action$.pipe(
    ofType(photoUploadStore.types.UPDATE_PHOTO),
    switchMap(
        (data) => {
            const files = localStorage.getItem('allData') ? JSON.parse(localStorage.getItem('allData')).files : [];
            data && files.push(data.payload);
            localStorage.setItem('allData', JSON.stringify({questions, files}));   
            return from(API.post(photoTokenUpdateAPI.postToken, {data: { files, questions }})).pipe(
                map(data => {
                    return photoUploadStore.creators.fetchListOfPhotos(data)
                }
                ),
                catchError(error => of(photoUploadStore.creators.updatePhotoError(error)))
            )
        }
    )
);

и фотографии будут успешно отображаться при вызове следующего API:

const fetchListOfPhotos = action$ => action$.pipe(
    ofType(photoUploadStore.types.FETCH_LIST_OF_PHOTOS),
    switchMap(
        (data) => {
            const payload = {
                //some data
            }
            return from(API.post(getTasksAPI.fetchTasks, payload)).pipe(
                map(data => {
                    localStorage.setItem('allata', data.data.task.metadata);
                    return photoUploadStore.creators.fetchListOfPhotosSuccess(data)}
                    ),
                catchError(error => of(photoUploadStore.creators.fetchListOfPhotosError(error)))
            )
        }
    )
);