React / Redux обрабатывает ошибки сервера API в редукторе для отображения в пользовательском интерфейсе

Question

Я создал загрузчик для загрузки файла CSV, который преобразуется в json и отправляется в API.

API имеет проверку, если данные недействительны, и возвращает ответ, который я вижу в моем отладчике:

{"success":false,"errorCode":"880ddb963e40","errorMessage":"There are Ids which do not exist in system"}

Мой пользовательский интерфейс выводит общее сообщение о том, что возникла проблема, как показано ниже, из моего редуктора:

import {
    PUT_UPLOAD_CSV,
    PUT_UPLOAD_CSV_SUCCESS,
    PUT_UPLOAD_CSV_FAILURE
} from 'constants/BulkUploads/ActionTypes';

const INIT_STATE = {
    uploadLoader: false,
    uploadResponse: '',
    uploadError: ''
}

export default (state = INIT_STATE, action) => {
    switch (action.type) {
        case PUT_UPLOAD_CSV: {
            return {
                ...state,
                uploadLoader: true,
                uploadResponse: '',
                uploadError: ''
            }
        }
        case PUT_UPLOAD_CSV_SUCCESS: {
            return {
                ...state,
                uploadLoader: false,
                uploadResponse: 'CSV file uploaded successfully',
                uploadError: ''
            }
        }
        case PUT_UPLOAD_CSV_FAILURE: {
            return {
                ...state,
                uploadLoader: false,
                uploadResponse: '',
                uploadError: 'An error occurred uploading CSV file, please check the data and try again.'
            }
        }

        default:
            return state;
    }
}

Я хочу, чтобы дескриптор моих редукторов uploadError мог возвращать API errorMessage, а не значение по умолчанию, чтобы ошибка была более конкретной, и / или использовать код ошибки в качестве поиска для отображения соответствующего сообщения.

Если кто-нибудь может помочь или указать мне какую-то документацию.

ОБНОВЛЕНИЕ - добавление моих действий

import {
    PUT_UPLOAD_CSV,
    PUT_UPLOAD_CSV_SUCCESS,
    PUT_UPLOAD_CSV_FAILURE,
} from 'constants/BulkUploads/ActionTypes';


export const putUploadCSV = (payload) => {
    return {
        type: PUT_UPLOAD_CSV,
        payload
    };
};

export const putUploadCSVSuccess = (payload) => {
    return {
        type: PUT_UPLOAD_CSV_SUCCESS,
        payload
    }
};

export const putUploadCSVFailure = (payload) => {
    return {
        type: PUT_UPLOAD_CSV_FAILURE,
        payload
    };
};

Мой index.js

{uploadError ?

{uploadError}
    :
{uploadResponse}
}

SAGA

function* putUploadCSVRequest(params) {
    try {
        const response = yield call(putUploadCSV, params.payload);
        yield put(putUploadCSVSuccess(response));
    } catch (error) {
        console.error(error);
        yield put(putUploadCSVFailure(error));
    }
}     

Answer 1

Вы используете только action.type в данной функции. Вы можете очень хорошо использовать другую клавишу, предпочтительно что-то вроде action.data или action.payload, чтобы определить различные типы действия PUT_UPLOAD_CSV_FAILURE и соответственно отрегулировать редуктор.

Чтобы дать вам точное решение, основанное на вашем конкретном сценарии, мне может понадобиться понять, как вы распределяете действия.

Обновление:

Поскольку вы используете создателей действий putUploadCSVFailure, вы можете создать действие как

putUploadCSVFailure(response.errorMessage)

внутри перехвата или ответа вашего HTTP-клиента (axios? Fetch? Xhr?)

Теперь полезной нагрузкой является сообщение об ошибке, поэтому обновите редуктор как

case PUT_UPLOAD_CSV_FAILURE: {
        return {
            ...state,
            uploadLoader: false,
            uploadResponse: '',
            uploadError: action.payload || 'An error occurred uploading CSV file, please check the data and try again.'
        }
    }

Answer 2

Вы можете добавить проверку того, что если api отправляет ошибку, то показывает ошибку api или показывает пользовательскую ошибку.например,

const customError = 'An error occurred uploading CSV file, please check the data and try again.'
// in the reducer, assuming action.payload has response
uploadError: action.payload.errorMessage || customError

Answer 3

Поскольку я не уверен, как вы вызываете действие, я могу дать вам подсказку, чтобы помочь вам с вашей проблемой.

Вы можете передать параметр сообщения действию и затем использовать его в своем редукторе.

Действие вызова:

this.props.onUploadError({type: PUT_UPLOAD_CSV_FAILURE, errorMessage: jsonData.errorMessage});

Модификация оператора редуктора:

case PUT_UPLOAD_CSV_FAILURE: {
    return {
        ...state,
        uploadLoader: false,
        uploadResponse: '',
        uploadError: action.errorMessage
    }
}