首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将公共接口请求文件中的数据调度到redux?

如何将公共接口请求文件中的数据调度到redux?
EN

Stack Overflow用户
提问于 2020-11-05 18:10:06
回答 1查看 250关注 0票数 0

我已经创建了一个通用的js文件来调用服务请求。我希望将获取的数据存储在我的redux托管存储中。但是我收到这个错误,说Invalid hook call. Hooks can only be called inside of the body of a function component.,我想这是因为我没有对这个文件使用react-native样板。但问题是,我不想这样做,我只想发出服务请求和响应。

代码语言:javascript
复制
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

我知道会有一些简单的办法,但我不知道

EN

回答 1

Stack Overflow用户

发布于 2020-11-05 18:26:53

不要使用来自react-reduxuseDispatch,而要使用来自reduxdispatch。您需要在应用程序中使用redux-thunk

请看本文中的示例Redux Thunk Explained with Examples

本文还提供了一个示例,说明如何将redux用于异步调用(在本例中为axios请求)。

我建议重构你的api来区分两件事:

  1. fetcher -它将调用你的axios,并在
    1. creator中返回数据(thunk,参见本文中的示例)-它将(可选)调度REQUEST_STARTED,然后调用你的fetcher,最后将调度(REQUEST_SUCCESS/REQUEST_FAILURE)操作。

后一个redux操作创建器,你将在你的react组件中调用,你将在那里分派它(例如,使用useDispatch)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64695041

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档