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

我刚开始反应，我有点迷失。我正在尝试创建一个登录页面并发出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兼容所有浏览器（链接）
Axios库。（链接）
超级承诺。（链接）

如果你使用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基础知识这里。因此，一旦您的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
      }
   }

我没有使用你提到的图书馆，但我建议你观看关于Redux的免费视频。您将从创作者自己学习所需的一切，包括如何进行http调用。你真的不需要另一个抽象来做到这一点 egghead.io/courses/getting-started-with-redux egghead.io/courses/... - Tim Reynolds

这里是你想要做的文件。基本上你需要做两件事。首先，启动一个ajax请求（使用你想要的任何东西， fetch 当你调用动作时，或者例如jQuery）。这很可能发生在行动本身内。接下来您需要做的是在ajax调用完成时使用ajax调用中的信息更新存储。为此，您需要访问 dispatch 商店的功能。关于 AsyncActionCreators 应该告诉你如何做到这一点。 - mrmcgreg

我也会远离那个图书馆，直到你明白如何用公司做事 react-redux。 - mrmcgreg

此外，在尝试使用异步操作之前，您应该完全清楚同步操作如何与reducer和store一起工作。 - mrmcgreg

我对axios的投票。在生产中使用它，它很棒。 - lux

精彩摘要。谢谢Harkirat - Piotr Berebecki

谢谢。我现在正在尝试使用axios.post对Axios执行POST请求，但它会继续发送get请求。我是否需要为帖子创建一个动作？看到： stackoverflow.com/questions/39797940/... - jmona789

猜猜你的问题解决了吗？ - Harkirat Saluja

我已经在捆绑大小和性能方面做了很多工作，而Axios显然是添加到捆绑包中的模块总体大小的最小开销。通常，React应用程序往往在供应商捆绑包上膨胀。 Axios至少更好。 - Mr. Doomsbuster

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

答案:

热门问题

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

答案:

热门问题

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