在 React/Redux 架构中将 API 调用放在哪里？答案

【问题标题】：Where to put API calls in React/Redux architecture?在 React/Redux 架构中将 API 调用放在哪里？
【发布时间】：2017-03-08 02:19:51
【问题描述】：

我正在尝试从 API 中检索一些数据并将其传递到我的应用程序中。然而，作为 React/Redux 的新手，我想知道从哪里进行这些调用以及如何将其传递到我的应用程序中？我有标准的文件夹结构（组件、reducers、容器等），但现在我不确定我的 API 调用应该放在哪里。

【问题讨论】：

有几种方法，如果是简单的 api 调用，你可以把它放在组件生命周期方法上，比如 componentdidmount，然后当你得到响应时调度一个动作，但是调试和调试会很棘手一旦你开始在不同的组件中添加一些这样的 api 调用就维护，在这种情况下更好的方法是使用中间件，最流行的可能是 redux-thunk 或 redux-sagas，我个人更喜欢 sagas

标签： reactjs react-native redux reactjs-flux

【解决方案1】：

诸如 AJAX 调用之类的行为称为“副作用”，通常存在于您的组件、“thunk”动作创建器或其他类似的 Redux 副作用插件中，例如“sagas”。

请在 Redux 常见问题解答中查看此答案以获取更多信息details：

【讨论】：

【解决方案2】：

“授人以渔的答案”。

这取决于呼叫的类型和情况。

通常对于简单的“获取”，这可以通过放置它们来轻松完成正如 Nader Dabit 所展示的那样，进入您的动作创作者。
有许多副作用管理库可以选择您将它们放在它们的块中（redux-sagas、axios 调用、redux-thunk）

我现在使用 redux-sagas。至少在我们决定是否对 async/await 做出决定之前，这可能会出现在更新版本的 JS 中。

这可能是最重要的部分！

请务必考虑通常在文档中找到的与您的特定工具集一起使用的一般“惯例”，并确保在未来搜索“最佳实践”以获取此类内容。 这将帮助其他刚接触您项目的人了解他们的方向并直接参与进来，而无需加速学习您的新定制版本。

【讨论】：

【解决方案3】：

开始使用此功能的最简单方法是将其添加到您的操作中，使用称为 thunk 的函数以及 redux-thunk。您需要做的就是将 thunk 添加到您的商店：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

然后在您的操作中创建一个调用 api 的函数：

export const getData() {
  (dispatch) => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(json => dispatch(resolvedGetData(json)))
  }
}

export const resolvedGetData(data) {
  return {
    type: 'RESOLVED_GET_DATA',
    data
  }
}

【讨论】：

你如何调度/调用这个动作？