React Redux асинхронная мультидиспетчерская

Question

Я сделал простую многофайловую форму ввода с onChange, когда вы выбираете изображение, оно отправляет запрос API в API.Он возвращает информацию об информации об изображениях внутри таблицы в порядке выбора.

У меня есть одна проблема, он отправляет несколько изображений, но я не хочу ждать, пока предыдущее отправит другой запрос.Я хочу, чтобы он был асинхронным, но я хочу, чтобы он имел статус, чтобы вы могли видеть статус внутри таблицы.

Это у меня сейчас получилось:

Действие для каждого файла ввода

/**
 * Fileupload request
 */
export const FILEUPLOADER_REQUEST_REQUEST = 'FILEUPLOADER_REQUEST_REQUEST';
export const FILEUPLOADER_REQUEST_SUCCESS = 'FILEUPLOADER_REQUEST_SUCCESS';
export const FILEUPLOADER_REQUEST_ERROR = 'FILEUPLOADER_REQUEST_ERROR';

export function fileuploader_request(payload){
    return function (dispatch, getState){
        dispatch(fileuploader_request_request());
        const { access_token } = getState().auth
        const { image } = payload;
        const formdata = new FormData();
        formdata.set('image', image);
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_URL + '/v1/compressor',
            data: formdata,
            headers: {
                'Accept': 'application/json',
                'Authorization': 'Bearer ' + access_token
            }
        }).then(function (response) {
            const payload = {
                compressed_image: response.data.data
            }
            dispatch(fileuploader_request_success(payload));
        }).catch(function (error) {
            dispatch(fileuploader_request_error(error.response.data.error));
        });
    }
}

export function fileuploader_request_request(){
    return {
        type: FILEUPLOADER_REQUEST_REQUEST
    };
}

export function fileuploader_request_success(payload){
    return {
        type: FILEUPLOADER_REQUEST_SUCCESS,
        payload
    };
}

export function fileuploader_request_error(payload){
    return {
        type: FILEUPLOADER_REQUEST_ERROR,
        payload
    };
}

Редуктор

import {
    FILEUPLOADER_REQUEST_REQUEST,
    FILEUPLOADER_REQUEST_SUCCESS,
    FILEUPLOADER_REQUEST_ERROR
} from './actions';

const initialState = {
    compressed_images: [],
    request: {
        fileuploader: {
            request: false,
            success: false,
            error: {}
        }
    }
}

export default function(state = initialState, action) {
    const {
        type,
        payload
    } = action;
    switch (type) {
        case FILEUPLOADER_REQUEST_REQUEST:
            return {
                ...state,
                request: {
                    ...state.request,
                    fileuploader: {
                        request: true,
                        success: false,
                        error: {}
                    }
                }
            }
        case FILEUPLOADER_REQUEST_SUCCESS:
            return {
                ...state,
                compressed_images: [...state.compressed_images, payload.compressed_image],
                request: {
                    ...state.request,
                    fileuploader: {
                        request: false,
                        success: true,
                        error: {}
                    }
                }
            }
        case FILEUPLOADER_REQUEST_ERROR:
            return {
                ...state,
                request: {
                    ...state.request,
                    fileuploader: {
                        request: false,
                        success: false,
                        error: payload
                    }
                }
            }
        default:
            return state;
    }
}