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

＆＃34;教导男人回答问题。＆＃34;

这取决于通话类型和情况。

一般来说，简单＆＃34;得到＆＃34;这可以通过放置它们轻松完成如Nader Dabit所示，进入你的动作创作者。
有许多副作用管理库可供选择你把它们放在他们的块中（redux-sagas，axios calls，redux-thunk）

我现在使用redux-sagas。至少直到我们决定yay或nay async / await可能会出现在更新版本的JS中。

这可能是最重要的部分！

请务必考虑一般＆＃34;惯例＆＃34;与您在文档中常见的特定工具集一起使用时，并确保google＆＃34;最佳做法＆＃34;在未来这样的事情。这将有助于其他新的项目获得他们的支持，只是跳进去，而不会增加学习新的自定义版本。

Answer 3

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

有关详细信息，请参阅Redux常见问题解答中的此答案：http://redux.js.org/docs/faq/Actions.html#actions-side-effects。

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

3 个答案: