Reactjs 在Redux中处理RESTAPI调用的更好方法

在我的应用程序中，我需要调用几个REST API端点：

//用户界面类
类LoginForm扩展组件{
handleSubmit（）{
store.dispatch（登录名（用户名、密码））；
}
}
//行动
函数登录（用户名、密码）{
返回调度=>{
获取（登录API，{…}）
。然后（响应=>{
如果（response.status>=200&&response.status<300）{
//成功
}否则{
//失败
}
})
}
}

要点在上面，很容易理解。用户触发一个动作，对相应的端点进行ajax调用

随着我添加越来越多的API端点，我最终得到了一系列类似于上面的

login

函数框架的函数

我应该如何构造代码，使其不会重复使用重复的ajax函数

---

谢谢

我处理类似情况的方法是为API调用使用两个包装器：

function get(url) {
    return fetch(url)
        .then(response => {
            if(response.status >= 200 && response.status < 300) {
                return response
            }
            else {
                let error = new Error(response.statusText)
                error.response = response
                throw error
            }
        })
        .then(response=> response.json())
}

---

我还有一个post包装器，它还为CSRF设置头并清理数据。我不在这里发布它，因为它与应用程序非常相关，但它应该是非常有用的方法。

我强烈建议您阅读github示例项目。一开始很难理解，但不要担心，继续阅读并了解其中发生了什么

它使用非常清晰和简单的方法来处理所有API调用。当您想要调用一个API时，您应该

分派一个具有如下特定结构的操作：

{
    types: [LOADING, SUCCESS, FAIL],
    promise: (client) => client.post('/login', {
       data: {
               name: name
             }
    })
}

它将通过a处理此类操作。
将fetch函数移动到接受URL作为参数的util函数中？：）@我曾想过，但它不会起作用，因为每个端点的成功状态处理是不同的。要将您的解决方案用于我的示例，我将把
get（…）。然后（…）.catch（…）
放在UI组件的
handleSubmit（）
中？
{
    types: [LOADING, SUCCESS, FAIL],
    promise: (client) => client.post('/login', {
       data: {
               name: name
             }
    })
}