首页 文章

我应该在派遣时捕获Redux promise错误还是只在reducer中处理它？

提问于
浏览 次
2

所以基本上我用thunk和redux-promise-middleware调度一个动作，它产生一个返回promise的API调用 . 然后，我将承诺返回给另一个动作创建者作为“有效负载”参数，该参数与redux-promise-middleware一起使用，并处理不同的动作MY_ACTION_TYPE_PENDING或MY_ACTION_TYPE_REJECTED或MY_ACTION_TYPE_FULFILLED . 我的问题是我是否通过_REJECTED操作处理reducer中的错误并且没有在我的调度中捕获它（actionCreator（payload）？当我没有在我的调度上发现错误时，我在控制台中收到警告，尽管我的reducer处理了_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)
                            })
                        }
                    }

那么这是我的一些博客Reducer文件，它处理承诺中间件发出的动作

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;
    }
}
javascript reactjs redux es6-promise redux-promise-middleware

2 回答

  • 1

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

    在您的示例中，您没有捕获promise错误 . 正如您所解释的那样，您只能处理减速器中的错误 .

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

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

    然而，实际的承诺在这个实现中仍然没有被捕获 . 为了捕获promise错误，您需要在dispatch（或in a middleware）处执行此操作 .

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

    如果在分派时捕获到错误，则不会在控制台中看到错误 . 详细，但直截了当/明确，这种做法使其他开发人员清楚如何处理错误 . 我认为清晰度对于可维护性和未来的变化很重要，因此我认为为什么我会在调度时发现错误 .

    希望有所帮助！

    回复于
  • 1

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

    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})})
}
    回复于

相关问题