Question

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

在react组件中获取数据并将数据传递给redux操作
在redux动作内部获取数据

Answer 1

一般的经验法则是：

如果仅在单个组件中使用数据，则应将其保留在那里。
如果您的数据将用在其他组件中，请保持其父级或全局状态（在这种情况下为redux）。

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

例如如果您必须单击以加载组件，然后它将触发api调用，则可能会受益于在用户单击之前简单地将其加载到后台，以便在可能的停机时间内更好地利用其带宽。

Answer 2

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（异步操作）并在化简器中处理响应。

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

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

Answer 3

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

Redux-Saga

Answer 4

如果您对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
    }
  }

然后将您在化简器中的操作获得的数据消耗掉。

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

我应该在React组件或Redux动作中获取数据吗？

4 个答案: