Menu
Feb 23, 2020 Using Fetch to Post Data. The Fetch API is not limited to GET requests only. You can make all other types of requests (POST, PUT, DELETE, etc.) with custom request headers and post data. Contexts 3 3 1 – fast window switcher software. Here is an example of a POST request. React Native Fetch. This post will give you an idea about how to Make HTTP Request to Fetch the Data From Web APIs in React Native. Here is an interesting example of posting and fetching the data from the server. Whenever you connect your application from the backend server (to get or post the data) you have to make an HTTP request.
In this tutorial, we will learn about how to fetch data from the API in redux by using the redux-thunk middleware.
Getting started
We are using the
create-react-app
command line tool to generate the new react app boilerplate.This above command will download the react app related files inside the “http-redux” folder.
Scrutiny 8 1 10 – suite of web optimization tools. Change your working directory to “http-redux” by using below commands.
npm start
command is used to turn on the react app development server.Connecting react with redux
Now we need to make a connection between the react and redux libraries for that we need to downloadtwo packages from the npm.
Run the following commands to install the
redux
and react-redux
packages.Redux is a state management library for JavaScript apps.
React-redux is used to make a connection between react and redux.
Open your “http-redux” folder using your favorite code editor and create a new folder called
reducers
inside your src
directory.In
reducers
folder create a new file called myreducer.js
and add the below code.myreducer.js
Here we just created a small reducer function with one action type “INCREMENT”.
Open your
index.js
file and the below code.index.js
Now We successfully connected react with redux.
Synchronous action creators
Synchronous action creators are just functions which return an object with the type ofaction and payload.
Let’s create a synchronous action creator.
create a new file called
actions.js
in your src folder.![Fetch Fetch](https://minigolfmontreal.com/images/react-native-fetch-post-example-4.png)
actions.js
![React Fetch Post React Fetch Post](https://minigolfmontreal.com/images/bc4431d157b3a56cec722d857007771d.jpg)
Let’s use this action creator to dispatch the
INCREMENT
Platina 125. action.App.js
This asynchronous action creator example.
Asynchronous action creators
Asynchronous action creators don’t return the
object
immediately with action type and payload instead of it returns the function with parameters dispatch
and getState
.React Fetch Post Json
Because in asynchronous code like if we fetching something from the backend API it takes some time to get the data from the backend so that we are not dispatching the action immediately instead of we are dispatching the action only when the data comes back from the backend API.
React Fetch Post Response
For Asynchronous actions we need to install a new package called
redux-thunk
.redux-thunk
is a middleware which helps us to delay the actions to dispatch.If you want to learn about thunks then check out my previous tutorial.
once you successfully installed the ‘redux-thunk’ now we need to configure our code to use thismiddleware.
Open your
index.js
and update with redux-thunk
configuration.First, we imported
applyMiddleware
function from the ‘redux’ library then we imported ‘thunk’ from the ‘redux-thunk.Next, we invoked the
applyMiddleware
function by passing the thunk
as its argument.Update your
reducers.js
file with below code.We are updated our
reducer.js
file by adding a two new action types “FetchData” and “ERROR”.Let’s create an asynchronous action creator which helps us to fetch the data.
React Fetch Post Request
update your
actions.js
file with the below code.actions.js
In the above code, we only dispatch the
FetchData
action whenever the data arrives from the API and we dispatch the ERROR
action in case an error occurs while fetching the data.Let’s dispatch the asynchronous action creator in our
App
component.App.js
React Fetch Form Post
In the
App
component we called the this.props.onFetchData()
function inside thecomponentDidMount()
life cycle method.Output: