reactjs - 在 React+Redux 应用程序中将网络调用放在哪里

Question

我试图了解人们会认为人们如何在他们的react+redux应用程序中组织网络调用的最佳实践。我通常让我的组件进行调用，获取数据，然后将其传递到将被减少的操作中。这是最佳实践还是最好将网络从我的组件中分离出来并将该逻辑放置在应用程序的其他位置(也许放在 reducer 中)？

Answer 1

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

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

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

显然，您可以自由地构建自己的 Promise 中间件，但这应该为您指明正确的方向。