将网络调用放在react + redux应用程序中的位置

Question

我试图想一想人们会考虑人们如何在他们的react + redux应用程序中组织网络调用的最佳实践.我通常让我的组件进行调用,获取数据然后将其传递给将减少的操作.这是最好的做法还是最好将网络从我的组件中分离出来并将该逻辑放在应用程序的其他位置,也许是在reducer中？

Answer 1

进行网络调用的最佳位置是您的动作创建器。但是，您将需要一些中间件才能使其发挥最佳效果。看看这个承诺中间件（事实上，我建议查看整个教程）。如果您使用该中间件，您可以拥有返回承诺的操作创建者，并且还具有三种操作类型 - 一种用于请求，一种用于处理成功的响应，一种用于处理失败的请求。然后你只需在你的减速器中监听这 3 个动作。

因此，使用该中间件，您可以拥有如下所示的操作创建器：

function networkCall() {
    return {
        types: ['MAKE_REQUEST', 'REQUEST_SUCCESS', 'REQUEST_FAILURE'],
        promise: () => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: 'example.com/api'
                    type: 'GET'
                });
            })
        }
    }
}

显然，您可以自由地构建自己的 Promise 中间件，但这应该会让您走上正确的方向。