How do I make an HTTP request in react-redux?

Question

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

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?

I've not used the library you mention but I'd recommend you watch the free videos on egghead about Redux. You'll learn everything you need to get going from the creator himself including how to make http calls. You really don't need another abstraction to do this https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux — Tim Reynolds, Sep 30 '16 at 15:24
[Here](http://redux.js.org/docs/advanced/AsyncActions.html) are the docs for what you are trying to do. Basically you need to do two things. First, kick off an ajax request (using whatever you want, `fetch` or jQuery for example) when you call the action. This will most likely happen within the action itself. The next thing you need to do is update the store with the info from the ajax call when the ajax call completes. In order to do that you need access to the `dispatch` function of the store. The section on `AsyncActionCreators` should show you how to do this. — mrmcgreg, Sep 30 '16 at 15:30
I'd also stay away from that library until you understand how to do things with just `react-redux`. — mrmcgreg, Sep 30 '16 at 15:40
Also, you should be absolutely clear about how synchronous actions work with respect to the reducer and the store before trying to use asynchronous actions. — mrmcgreg, Sep 30 '16 at 15:42

score 41 · Accepted Answer · edited Aug 13 '18 at 08:37

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

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

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.

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

FETCH

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

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.

Action to fetch 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}
    }
  }

Action to update state

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

Reducer

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

Thank you. I am now trying to do a POST request with Axios using axios.post but it keeps sending a get request instead. Do I need to create an action for the post to work? see: http://stackoverflow.com/questions/39797940/react-axios-is-sending-a-get-request-instead-of-a-post — jmona789, Sep 30 '16 at 18:36
I've been doing lot of work with bundle sizing and performance, and Axios clearly seems to be the smallest overhead in terms of overall size of the module added to your bundle. Typically, React apps tend to be bloated on the vendor bundles. Axios is atleast better that way. — Mr. Doomsbuster, Oct 22 '17 at 20:22

How do I make an HTTP request in react-redux?

1 Answers1

Linked