Javascript React/Redux处理reducer中的API服务器错误以在UI上显示

我已经创建了一个上传程序来上传一个CSV文件，它被转换成json并发送到API

如果数据无效，API将进行验证，并返回我在调试器中看到的响应：

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

My UI从My reducer中输出一条通用消息，指出存在如下所示的问题：

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

我希望我的reducer

uploadError

handle能够返回API errorMessage，而不是我的默认消息，以便错误更具体，和/或使用错误代码作为查找来显示适当的消息

如果有人能帮我或给我指一些文件

更新-添加我的操作

我的index.js

{uploadError ?

{uploadError}
    :
{uploadResponse}
}

传奇

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

---

因为我不确定您是如何调用该操作的，所以我可以给您一个提示来帮助您解决问题

您可以将消息参数传递给操作，然后在减速机中使用它

行动呼吁：

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

减速器案例陈述修改：

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

---

因为我不确定您是如何调用该操作的，所以我可以给您一个提示来帮助您解决问题

您可以将消息参数传递给操作，然后在减速机中使用它

行动呼吁：

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

减速器案例陈述修改：

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

---

您仅使用

操作。在给定函数中键入
。您最好使用另一个键，例如
action.data
或
action.payload
来识别不同类型的
PUT\u UPLOAD\u CSV\u FAILURE
操作，并相应地调整减速器

为了根据您的特定场景为您提供准确的解决方案，我可能需要了解您是如何调度操作的

更新：

由于您使用的是action creators
putUploadCSVFailure
，因此可以按以下方式创建操作：

putUploadCSVFailure(response.errorMessage)

在HTTP客户端（axios？fetch？xhr？）的捕获或响应中

现在，有效负载就是errorMessage，所以根据需要更新reducer

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.'
        }
    }

您仅使用
操作。在给定函数中键入
。您最好使用另一个键，例如
action.data
或
action.payload
来识别不同类型的
PUT\u UPLOAD\u CSV\u FAILURE
操作，并相应地调整减速器

为了根据您的特定场景为您提供准确的解决方案，我可能需要了解您是如何调度操作的

更新：

由于您使用的是action creators
putUploadCSVFailure
，因此可以按以下方式创建操作：

putUploadCSVFailure(response.errorMessage)

在HTTP客户端（axios？fetch？xhr？）的捕获或响应中

现在，有效负载就是errorMessage，所以根据需要更新reducer

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.'
        }
    }

您可以添加检查，如果api发送错误，则显示api错误或显示自定义错误。e、 g

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

您可以添加检查，如果api发送错误，则显示api错误或显示自定义错误。e、 g

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

添加了我的传奇-仍在挣扎。。。。putUploadCSVFailure（response.errorMessage）是否替换了yeild put（putUploadCSVFailure（error）？添加了我的传奇-仍在挣扎…putUploadCSVFailure（response.errorMessage）是否替换了yeild put（putUploadCSVFailure（error）？