Question

我正在撰写React + Redux个应用。要进行API调用，我使用的Redux 中间件使用fetch，如下所示：

const Api = ({dispatch, getState}) => (next) => (action) => {
    switch (action.type) {
        case 'FETCH_FROM_API':
            fetch('https://my-awesome-api/action')
            .then(res => {
                if (res.ok) {
                    return res.json()
                } else {
                    throw Error(`wrong API response: ${res.status}`)
                }
            }).then(jsonData => {
                dispatch({type: 'FETCH_FROM_API_DONE', payload: jsonData})
            }).catch((e) => {
                dispatch({type: 'API_ERROR', payload: e})
            })
            break
        default:
            break
    }

    next(action)
}

export default Api

该操作将在方法（在组件中）中调度，如下所示：

doButtonClick() {
    dispatch({type: 'FETCH_FROM_API'})
}

问题是在实际代码中我有很多组件要根据特定API调用中的成功/失败来改变状态。这包括（但不限于）：

成功创建元素时清除输入字段等
如果API调用失败，则显示错误消息（在特定组件内）
在API调用正在进行时显示加载消息（在特定组件内）

调度时会有API_ERROR个事件的通用处理程序 - 但这并不能解决主要问题，即强烈希望在实际组件中调度API调用事件。

到目前为止，我已经提出了两种可能的解决方案。第一种是使用回调函数 - 它们可以在调度之前放入事件中，例如：

dispatch({
    type: 'FETCH_FROM_API',
    success: () => {
        // Handle success
    },
    error: () => {
        // Handle error
    }
})

...但是这将使用回调函数丢弃代码（有很多调度的API调用）。第二种是将Redux状态添加到单独的API调用中，并将connect()添加到组件中，以便它们可以相应地更改 - 但这会增加很多额外的状态。

有没有经过验证的好方法来实现这一目标？

如果API调用/不成功，则更改React UI

0 个答案: