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