Question

我正在尝试了解一些人会考虑人们如何在他们的react + redux应用程序中组织网络调用的最佳实践。我通常让我的组件进行调用，获取数据然后将其传递给将减少的操作。这是最好的做法还是最好将网络分离出我的组件并将该逻辑放在应用程序的其他位置，可能是在reducers中？

Answer 1

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

因此，使用该中间件，您可以拥有这样的动作创建者：

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

显然，你可以自由地建立自己的承诺中间件，但这应该让你朝着正确的方向前进。

Answer 2

我认为这是在Angular中做的一件事。您已将所有网络电话整齐地放在services中。这可以在Redux中轻松完成。

文档正确地建议您使用actions网络电话。我将它们分解到一个单独的地方，你可以称它为“服务”＃34;。在那里，您将定义所有常量，例如您的API服务器URL，与身份验证相关的内容等。这将是唯一知道您的网络调用的实现细节的地方 - 您使用的库（jQuery，axios，superagent，等）。

您的操作文件将从这些服务导入函数并调用它们。如果您稍后决定更换网络库，则无需更改actions。

Answer 3

我几乎遵循redux tutorials for Async Actions中的行为模式。对我来说最重要的是保持动作中的所有异步 - 远离组件和存储/缩减器。

我还使用Redux Crud来标准化与网络操作相关的操作。

Answer 4

你可以使用API中间件，redux-api-middleware或你自己的东西（write one不是很难）。

然后，例如，您的动作创建者可以返回

之类的动作

{type: 'API_GET', url: '/api/userList', nextType: 'USER_LIST'}

...稍后将由发送实际请求的中间件处理，然后发送新动作，如：

{type: 'USER_LIST_FETCHED', status: 200, payload: [{id: 1, ...}, ...]}
{type: 'USER_LIST_FAILED', status: 404, payload: {message: '...'}}

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

4 个答案: