我开始更多地学习React,我有一个问题。从API提取数据的更好方法是什么。
答案 0 :(得分:4)
一般的经验法则是:
但是有一个陷阱。根据组件的加载顺序,您可能会受益于在组件加载之前进行api调用,在这种情况下,从redux操作中获取数据会很有用。
例如如果您必须单击以加载组件,然后它将触发api调用,则可能会受益于在用户单击之前简单地将其加载到后台,以便在可能的停机时间内更好地利用其带宽。
答案 1 :(得分:1)
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)
答案 2 :(得分:1)
您的组件将主要用于调度动作和显示返回的数据。您将使用分派的动作触发组件中的API调用,并在化简器中处理响应。通常使用redux-thunk或redux-sagas之类的东西来处理异步操作,然后可以从redux状态访问已调用的数据。我个人是redux-saga的粉丝,您可以在此处查看
答案 3 :(得分:1)
如果您对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;
}