我已经创建了一个通用的js文件来调用服务请求。我希望将获取的数据存储在我的redux托管存储中。但是我收到这个错误,说Invalid hook call. Hooks can only be called inside of the body of a function component.,我想这是因为我没有对这个文件使用react-native样板。但问题是,我不想这样做,我只想发出服务请求和响应。
import { useDispatch } from "react-redux";
import { addToken } from "../redux/actions/actions";
const { default: Axios } = require("axios");
const dispatch = useDispatch();
const handleResponse=(response, jsonResponse)=> {
// const dispatch = useDispatch(); //-----also tried using dispatch here
const jsonRes = jsonResponse;
const { status } = response;
const { errors } = Object.assign({}, jsonRes);
const resp = {
status,
body: jsonResponse,
errors,
headers: response.headers,
};
console.log(resp, 'handle response');
return await dispatch(addToken(resp.body.token))
};
const API = {
makePostRequest(token) {
Axios({
url: URL,
...req,
timeout: 30000
}).then(res =>
console.log('going to handle');
await handleResponse(res, res.data)
})
}
export default API我知道会有一些简单的办法,但我不知道
发布于 2020-11-05 18:26:53
不要使用来自react-redux的useDispatch,而要使用来自redux的dispatch。您需要在应用程序中使用redux-thunk。
请看本文中的示例Redux Thunk Explained with Examples
本文还提供了一个示例,说明如何将redux用于异步调用(在本例中为axios请求)。
我建议重构你的api来区分两件事:
axios,并在REQUEST_STARTED,然后调用你的fetcher,最后将调度(REQUEST_SUCCESS/REQUEST_FAILURE)操作。后一个redux操作创建器,你将在你的react组件中调用,你将在那里分派它(例如,使用useDispatch)
https://stackoverflow.com/questions/64695041
复制相似问题