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?
While Redux holds the global state and actions that can be dispatched, the React Hooks features to handle the local component state.
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).
You can try any of the following. I have used both fetch
and axios
they work amazingly well. Yet to try superagent
.
fetch
with fetch-polyfill for compatibility across all browsers (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 } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With