reactjs – 如何在react-redux中发出HTTP请求？

发布时间：2020-12-15 20:53:45 所属栏目：百科来源：网络整理

导读：我刚开始反应,我有点迷失.我正在尝试创建一个登录页面并发出http post请求.现在我只是想让任何类型的HTTP请求工作,所以我正在使用请求bin,我在npm包( https://www.npmjs.com/package/redux-react-fetch)的文档中找到了这个基本动作： export function update

我刚开始反应,我有点迷失.我正在尝试创建一个登录页面并发出http post请求.现在我只是想让任何类型的HTTP请求工作,所以我正在使用请求bin,我在npm包( https://www.npmjs.com/package/redux-react-fetch)的文档中找到了这个基本动作：

export function updateTicket(ticketId,type,value){
  return {
    type: 'updateArticle',url: `http://requestb.in/1l9aqbo1`,body: {
      article_id: ticketId,title: 'New Title'
    },then: 'updateTicketFinished'
  }
}

所以,在写完一个动作之后,我该怎么办？我如何实际让我的应用程序调用并使用该操作？ npm包的文档提到了在我的商店中设置状态的东西,我需要先设置一些东西吗？

您可以尝试以下任何一种方法.我使用了fetch和axios,它们的工作效果非常好.然而,尝试superagent.

>对于发出请求,您可以使用fetch
fetch-polyfill兼容所有浏览器(link)
> Axios库. (link)
>承诺承诺.(link)

如果你使用fetch,你需要使用polyfill,因为IE和safari还不支持它.但是使用polyfill它可以很好地工作.您可以查看链接以了解如何使用它们.

那么你要做的就是在你的动作创建者中你可以使用上面的任何一个来调用API.

取

function fetchData(){
    const url = '//you url'
    fetch(url)
    .then (response ) => {//next actions}
    .catch( error) => {//throw error}
}

AXIOS

axios.get('//url')
  .then(function (response) {
    //dispatch action
  })
  .catch(function (error) {
    // throw error
  });

那就是API调用,现在进入状态.在redux中,有一个状态可以处理您的应用.我建议你应该通过redux基础知识,你可以找到here.因此,一旦您的api调用成功,您需要使用数据更新您的状态.

获取数据的操作

function fetchData(){
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
        const url = '//you url'
        fetch(url)
        .then (response ) => {dispatch(receiveData(response.data)} //data being your api response object/array
        .catch( error) => {//throw error}
    }
  }

更新状态的行动

function receiveData(data) {
      return{
        type: 'RECEIVE_DATA',data
     }
   }

减速器

function app(state = {},action) {
      switch(action.types){
          case 'RECEIVE_DATA':
                 Object.assign({},...state,{
                   action.data 
                     }
                  }) 
          default:
             return state
      }
   }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!