在 React/Redux 架构中将 API 调用放在哪里?

IT技术 reactjs react-native redux reactjs-flux
2021-05-16 21:46:23

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

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
  }
}

《授人以渔答》。

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

  1. 通常对于简单的“获取”,这可以通过将它们放入您的动作创建器中来轻松完成,如 Nader Dabit 所示。
  2. 有许多副作用管理库可以选择将它们放在它们的块中(redux-saga、axios 调用、redux-thunk)

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

这可能是最重要的部分!

请务必考虑通常在文档中找到的与您的特定工具集一起使用的一般“约定”,并确保将来在 google 中搜索“最佳实践”以解决此类问题。这将帮助其他不熟悉您的项目的人了解他们的方向,并直接投入使用,而无需进一步学习您的新定制版本。

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

有关更多详细信息,请参阅 Redux 常见问题解答中的此答案