我正在尝试从API中检索一些数据并将其传递到我的应用程序中。然而,由于我是React/Redux的新手,我不确定该从哪里进行这些调用以及如何将其传递到我的应用程序中?我的应用程序具有标准文件夹结构(components、reducers、containers等),但我现在不确定该将API调用放在哪里。
我正在尝试从API中检索一些数据并将其传递到我的应用程序中。然而,由于我是React/Redux的新手,我不确定该从哪里进行这些调用以及如何将其传递到我的应用程序中?我的应用程序具有标准文件夹结构(components、reducers、containers等),但我现在不确定该将API调用放在哪里。
最简单的方法是将它添加到你的操作中,使用一个叫做thunk的函数和redux-thunk
。你只需要将thunk添加到你的store中:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
然后,在你的 actions 中创建一个调用 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
}
}
“教人钓鱼答案”
这取决于调用的类型和情况。
我现在使用redux-sagas。至少在我们决定是否支持async/await之前,这可能会出现在JS的新版本中。
这可能是最重要的部分!
只需确保考虑到与您特定工具集中通常在文档中找到的一般“约定”,并确保将来要搜索“最佳实践”之类的东西。这将帮助项目中的其他新手获得方向,轻松进入,无需学习您的新定制版本。
像 AJAX 调用这样的行为被称为“副作用”,通常存在于您的组件、"thunk" action creators 或其他类似 Redux 副作用插件(如"sagas")中。
请参阅 Redux FAQ 中的此答案以获取更多详细信息: