在React/Redux架构中，API调用应该放在哪里？

Question

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

- Peter Zacharias

---

有几种方法可供选择，如果是简单的 API 调用，您可以将其放在组件生命周期方法中，例如 componentdidmount，然后在收到响应时调度一个操作，但是一旦您开始在不同组件中添加几个此类 API 调用，调试和维护就会变得棘手，这种情况下更好的方法是使用中间件，最流行的可能是 redux-thunk 或 redux-sagas，我个人更喜欢 sagas。 - StackOverMySoul

Answer 1

最简单的方法是将它添加到你的操作中，使用一个叫做thunk的函数和redux-thunk。你只需要将thunk添加到你的store中：

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

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

然后，在你的 actions 中创建一个调用 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
  }
}

- Nader Dabit

---

你如何触发/调用这个动作？ - mattnedrich

Answer 2

“教人钓鱼答案”

这取决于调用的类型和情况。

1. 一般情况下，对于简单的“获取”，可以像Nader Dabit所展示的那样将它们放入您的操作创建者中。
2. 有许多副作用管理库会选择将它们放置在它们的块中（redux-sagas、axios调用、redux-thunk）。

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

这可能是最重要的部分！

只需确保考虑到与您特定工具集中通常在文档中找到的一般“约定”，并确保将来要搜索“最佳实践”之类的东西。这将帮助项目中的其他新手获得方向，轻松进入，无需学习您的新定制版本。

- Urasquirrel

Answer 3

像 AJAX 调用这样的行为被称为“副作用”，通常存在于您的组件、"thunk" action creators 或其他类似 Redux 副作用插件（如"sagas"）中。

请参阅 Redux FAQ 中的此答案以获取更多详细信息：

- markerikson