Javascript 如果API调用为/isn'；不成功

我正在写一个

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

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

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\u ERROR

事件时，有一个通用的处理程序，但这并不能解决主要问题，即强烈希望在分派API调用事件的实际组件中有一个状态

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

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

。。。但这会使代码（有许多已调度的API调用）中充斥回调函数。第二种方法是添加特定于单独API调用的

Redux

状态，并将

connect（）

添加到组件，以便它们可以相应地更改-但这将添加大量额外的状态

---

是否有任何经验证的好方法可以实现这一点？

在我看来，这些组件的状态可能应该在Redux存储中移动，以允许您使用还原程序更改其状态，以侦听API调用的成功/失败。在存储中创建一个查找表，将所有失败的操作列为键，然后创建一个选择器如何（可能会记住）每个相关组件都可以查询此对象中的相关操作。例如：

failedOps{fetchTodos:true，saveTodo:true，toggleTodo:false}

并按如下方式访问它：

shourrr（）&&failedtodos.fetchTodos

谢谢@Sagivb.g和greto-使用redux存储的主要问题是它不是我想要表示的状态-它更多的是状态的变化。我有一个输入字段，其中包含一个要保存的值/名称-但控件不会消失（用户应该能够创建多个项目）。当保存成功时，应清除输入并给予焦点，如果保存失败，应通知用户。通知部分有点琐碎-有条件的清除困扰着我。