5

所以基本上我正在使用 thunk 和 redux-promise-middleware 调度一个动作，它会进行一个返回承诺的 API 调用。然后我将返回的承诺作为“有效负载”参数发送给另一个动作创建者，该参数与 redux-promise-middleware 一起使用并处理不同的动作 MY_ACTION_TYPE_PENDING 或 MY_ACTION_TYPE_REJECTED 或 MY_ACTION_TYPE_FULFILLED。我的问题是我是否通过 _REJECTED 操作处理减速器中的错误，而不是在我的 dispatch(actionCreator(payload) 上捕获它？当我没有在调度中捕获错误时，我会在控制台中收到警告，尽管我的减速器正在处理_REJECTED ACTION 出错了。

以下是我的一些操作：

export const RECEIVE_POSTS = 'RECEIVE_POSTS';
export const receivePosts = (data) => ({
    type: RECEIVE_POSTS,
    payload: data
})

// thunk middleware for fetching blog
                    export const fetchPosts = () => { 
                        return (dispatch) => {
                            const payload = contentfulClient.getEntries().then(
                                data => data.items,
                                error => console.log('An error occurred in fetchPost thunk middleware', error)
                                ) 
                            return dispatch(receivePosts(payload))
                            .catch((error) => {
                                console.log('caught error in fetchPost', error)
                            })
                        }
                    }

然后这是我的一些博客减速器文件，它处理承诺中间件发出的动作

const status = (state = Status.IDLE, action) => {
    switch (action.type) {
        case `${RECEIVE_POSTS}_PENDING` : 
            return Status.PENDING;      
        case `${RECEIVE_POSTS}_FULFILLED`:
            return Status.FULFILLED;
        case `${RECEIVE_POSTS}_REJECTED`:
            return Status.REJECTED;
        default:
            return state
    }
}

const error = (state = null, action) => {
    switch (action.type) {
    case `${RECEIVE_POSTS}_REJECTED`: 
        return action.payload.message
    default:
        return state;
    }
}
4

2 回答 2

3

这是一个很好的问题，我认为没有一个答案。最终，这取决于开发人员或开发团队。作为一种实践，我认为，是的，应在调度时处理/捕获承诺错误。这就是为什么...

在您的示例中，您没有发现承诺错误。正如您所解释的，您只处理减速器中的错误。

case `${RECEIVE_POSTS}_REJECTED`:
            return Status.REJECTED;

您读取具有类型的对象${RECEIVE_POSTS}_REJECTED并将更改写入状态。当您将更改写入状态时，您（可能会更新 UI 和/或调度副作用来处理错误。这是 Redux 的典型实现。

然而，实际的承诺在这个实现中仍然没有被捕获。为了捕获 promise 错误，您需要在 dispatch（或在中间件中）这样做。

dispatch(myAsyncActionCreator()).catch(function(error) {
  // do something with the error
})

如果您在调度时捕获错误，您将不会在控制台中看到错误。详细但直接/明确，这种做法使其他开发人员清楚地了解错误是如何处理的。我相信清晰度对于可维护性和未来的变化很重要，因此我主张在调度时捕获错误。

希望有帮助！

于 2018-08-18T16:29:51.650 回答
3

redux-thunk与自动类型修改相比，我发现以下代码更容易推理redux-promise-middleware......因此作为替代发布，以防其他人发现比较也有用：

export const fetchPosts = () => (dispatch) => {
  dispatch({type: '${RECEIVE_POSTS}_PENDING'})
  contentfulClient.getEntries()
    .then(data => dispatch({type: '${RECEIVE_POSTS}_FULFILLED', payload: data.items})
    .catch(error => dispatch({type: '${RECEIVE_POSTS}_REJECTED', payload: error})})
}
于 2018-08-18T17:07:22.313 回答