在React/Redux架构中放置API调用的位置？

Question

我试图从API中检索一些数据并将其传递给我的应用程序.不过是React/Redux的新手,我想知道从哪里调用这些调用以及如何将它传递到我的应用程序中？我有标准的文件夹结构(组件,缩减器,容器等),但我不知道现在在哪里放置我的API调用.

Answer 1

开始使用它的最简单方法是将其添加到您的操作中，使用称为 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
  }
}

Answer 2

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

请参阅 Redux 常见问题解答中的答案以了解更多详细信息：