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

Answer 1

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

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)

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