我应该在反应组件或 redux 操作中获取数据吗？答案

【问题标题】：Should i fetch data in react component or redux action?我应该在反应组件或 redux 操作中获取数据吗？
【发布时间】：2019-01-31 18:47:38
【问题描述】：

我开始更多地学习 React，我有一个问题。从 API 获取数据的更好方法是什么。

在 React 组件中获取数据并将数据传递给 redux 操作
在 redux 操作中获取数据

【问题讨论】：

标签： javascript reactjs redux fetch

【解决方案1】：

一般的经验法则是：

如果您的数据仅在单个组件中使用，那么您应该将其保留在那里。
如果您的数据将在其他组件中使用，请将其保持在父状态或全局状态（本例中为 redux）。

但是有一个问题。根据组件的加载顺序，您可能会受益于在加载组件之前进行 api 调用，在这种情况下，从 redux 操作中获取数据会很有用。

例如如果你必须点击加载一个组件，然后它会触发 api 调用，你可能会受益于在用户点击之前在后台加载它，以便在可能的停机时间更好地利用他们的带宽。

【讨论】：

【解决方案2】：

如果你对使用 Redux 很执着，那么你显然想通过一个动作来处理它。

一般来说，如果数据只用在组件中，那么在 componentDidUpdate() 或事件中调用 API 就可以了。

如果数据将被一堆不相关的组件使用，或者你最终会做很多 prop 线程，那么你会想要使用 Redux。

actions/index.js

  export const FETCH_DATA = 'FETCH_DATA'

  export const fetchData = async () => {

    const url = `http://your-url.com`;
    const request = await fetch(url);

    return {
      type: FETCH_DATA,
      payload: request
    }
  }

然后在 reducer 中使用您从操作中获得的数据。

reducers/reducer_whatever.js

  import { FETCH_DATA } from '../actions/index'

  export default function(state = [], action) {
    switch (action.type) {
      case FETCH_SOMETHING:
      return [ action.payload.data, ...state ];
    }

    return state;
  }

【讨论】：

【解决方案3】：

1. Fetch data in react component and pass data to redux action - NO (dispatch api action in the component)

2. Fetch data inside of redux action - NO (dispatch API promise here)

触发一个动作来调用api（异步动作）并在reducer中处理响应。

动作可以在你的组件内部触发。

如果组件要使用这些数据，请使用 HOC 函数 connect 将其连接到全局状态（redux）

【讨论】：

【解决方案4】：

您的组件将主要用于调度操作和显示返回的数据。您将使用已调度的操作触发组件中的 API 调用，并在 reducer 中处理响应。这通常使用 redux-thunk 或 redux-sagas 之类的东西来处理异步操作，然后您可以访问从 redux 状态调用的数据。我个人是 redux-saga 的粉丝，你可以在这里查看

Redux-Saga

【讨论】：