Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 727
jmona789 Avatar asked Sep 30 '16 15:09

jmona789


People also ask

Why use hooks instead of Redux?

While Redux holds the global state and actions that can be dispatched, the React Hooks features to handle the local component state.

Can I use request in React?

We can now perform HTTP requests in functional components thanks to the introduction of hooks in React. Previously, functional components were only used for rendering UI. A functional component is created when a JavaScript function (either standard or ES6) returns a React element (JSX).


1 Answers

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       }    } 
like image 192
Harkirat Saluja Avatar answered Sep 27 '22 20:09

Harkirat Saluja