如何在 react-redux 中发出 HTTP 请求? [英] How do I make an HTTP request in react-redux?

问题描述

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

I am just getting started with react and I'm a bit lost. I'm trying to make a login page and make a http post request. Right now I'm just trying to get any type of HTTP request working, so I'm using request bin and I found this basic action in the docs for an npm package (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 包的文档提到了有关在我的商店中设置状态的内容，我需要先设置这些内容吗?

So, after writing an action, what do I do? How do I actually get my app to call on and use that action? The docs for the npm package mention something about setting a state in my store, is that something I need to set up first?

推荐答案

您可以尝试以下任一方法.我已经使用了 fetch 和 axios，它们的效果非常好.尚未尝试superagent.

You can try any of the following. I have used both fetch and axios they work amazingly well. Yet to try superagent.

1. 对于提出请求，您可以使用 fetch 与fetch-polyfill 兼容所有浏览器(link)
2. Axios 库.(链接)
3. 承诺的超级代理.(link)

1. For making requests you can either use fetch with fetch-polyfill for compatibility across all browsers (link)
2. Axios library. (link)
3. Superagent with promises.(link)

如果您使用 fetch，则需要使用 polyfill，因为 IE 和 safari 尚不支持它.但是使用 polyfill 效果很好.您可以查看链接以了解如何使用它们.

If you use fetch you would need to use polyfill since it is not supported in IE and safari yet. But with polyfill it works pretty well. You can check out the links for how you can use them.

所以你要做的是在你的动作创建器中，你可以使用上述任何一种来调用 API.

So what you would doing is in your action creator you can call an API using any of the above.

取回

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 调用成功，您就需要使用数据更新您的状态.

So that was for the API call, now coming to the state. In redux there is one state which handles your app. I would suggest you should go through redux basics which you can find here . So once your api call succeeds you need to update your state with the data.

获取数据的操作

 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
      }
   }

这篇关于如何在 react-redux 中发出 HTTP 请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！