我正在尝试从 API 检索一些数据并将其传递到我的应用程序中。然而,作为 React/Redux 的新手,我想知道从哪里进行这些调用以及如何将其传递到我的应用程序中?我有标准的文件夹结构(组件、减速器、容器等),但我不确定现在将 API 调用放在哪里。
在 React/Redux 架构中将 API 调用放在哪里?
IT技术
reactjs
react-native
redux
reactjs-flux
2021-05-16 21:46:23
3个回答
开始使用它的最简单方法是将它添加到您的操作中,使用称为 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
}
}
《授人以渔答》。
这取决于呼叫的类型和情况。
- 通常对于简单的“获取”,这可以通过将它们放入您的动作创建器中来轻松完成,如 Nader Dabit 所示。
- 有许多副作用管理库可以选择将它们放在它们的块中(redux-saga、axios 调用、redux-thunk)
我现在使用 redux-sagas。至少在我们决定是否使用 async/await 之前,这可能会出现在较新版本的 JS 中。
这可能是最重要的部分!
请务必考虑通常在文档中找到的与您的特定工具集一起使用的一般“约定”,并确保将来在 google 中搜索“最佳实践”以解决此类问题。这将帮助其他不熟悉您的项目的人了解他们的方向,并直接投入使用,而无需进一步学习您的新定制版本。
诸如 AJAX 调用之类的行为被称为“副作用”,通常存在于您的组件、“thunk”动作创建者或其他类似的 Redux 副作用插件(例如“sagas”)中。
有关更多详细信息,请参阅 Redux 常见问题解答中的此答案:
其它你可能感兴趣的问题