0

我创建了一个上传器来上传一个 CSV 文件，它被转换为 json 并发送到 API。

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

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

我的 UI 输出一条通用消息，表明我的 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;
    }
}

我希望我的减速器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}
}

佐贺 

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

3 回答 3

2

您仅action.type在给定功能中使用。您可以很好地使用另一个键，最好是action.data或action.payload来识别不同类型的PUT_UPLOAD_CSV_FAILURE动作并相应地调整减速器。

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

更新：

由于您使用的是动作创建者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.'
        }
    }
于 2019-01-22T10:20:55.953 回答
0

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

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

行动号召：

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

Reducer case 语句修改：

case PUT_UPLOAD_CSV_FAILURE: {
    return {
        ...state,
        uploadLoader: false,
        uploadResponse: '',
        uploadError: action.errorMessage
    }
}
于 2019-01-22T10:20:42.280 回答
0

您可以添加检查是否 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
于 2019-01-22T10:22:07.980 回答