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 egghead.io/courses/getting-started-with-redux egghead.io/courses/… — Tim Reynolds
– Tim Reynolds, Commented Sep 30, 2016 at 15:24
Here 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
– mrmcgreg, Commented Sep 30, 2016 at 15:30
I'd also stay away from that library until you understand how to do things with just react-redux. — mrmcgreg
– mrmcgreg, Commented Sep 30, 2016 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
– mrmcgreg, Commented Sep 30, 2016 at 15:42

Dmitry Arkhipenko · Accepted Answer · 2018-08-13 08:37:31Z

41

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

edited Aug 13, 2018 at 8:37

Dmitry Arkhipenko

5275 silver badges16 bronze badges

answered Sep 30, 2016 at 16:30

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jmona789 Over a year ago

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: stackoverflow.com/questions/39797940/…

Mr. Doomsbuster Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related