React Native Tutorial #27 - How to Fetch Data from an API Using Redux

hi welcome to programming with mash in this session we want to create an api with json response and fetch it using redux [Music] in the preview session we learned how to use redux to manage a state in the app first i make changes to the home and login page and delete the components unrelated to decision now suppose we want to get a list from an api here in order to have an api with our own response i create an api through this site in this section we write the response i have already created a json array so i copy it and use it here and clicking this button creates an api with this response now if i enter this address in the browser because it was created as a get method it will return our response to call this api in the app we want to use the fetch function in the redux structure so i go to the actions file and create a new type [Music] i define the api address we created as a const here and then i create the desired action inside it i use the try catch block to lug it if an error occurs to create the object inside the dispatch use the fetch function to call the api the networking section of the react native document we can see how to use fetch how to use add promise and how to use as async eight here we use the asynchronous syntax put a value returned by the fetch function into a parameter called result enter the api url as the first parameter of the function and in the next parameter we enter an object of the required options the first is the method that the api should call the api we created works with the get method [Music] the next item is the headers that are set on the request for example with this header we set the request type to json type the value that the fetch function returns contains the same response that we set for the api so we convert it to json so that we can easily extract the information from it and here if the correct value is not returned there must have been an error in calling the api or from the server providing the api we can now create the object inside the dispatch using the new type we defined and the response we got from calling the api import the new action type into the reducers file and create an array in the estate to store the api response inside now here save the action value in the state riv created in the home page we import action and call the cities using use selector now here we call the action to call the api at the beginning of entering the home page and fill the cities array online now create a philatelies to display the other information of the cities in it [Music] do the response array consisted of items by country and city name so we display the information of each item into separate texts well as you can see by running the app the list of countries and cities is taken and displayed through the api this warning is because that the key is not defined in field list which we do and if i refresh the app this warning will no longer be displayed now i will define s-style for this list to make it look better [Music] so well now it gets better well here we called an api with the gets method if this method is paused it means that we can send parameters along with the request which we do in the body so there we go we learned how to fetch data from an api using redux so in the next video we will talk about push notification now if you enjoyed the video please don't forget to like comment share and subscribe and i'll see you in the next session you

Channel: Programming with Mash

Views: 30,466

Keywords: programming with mash, Fetch Data from an API Using Redux, react native fetch tutorial, how to fetch data from api in react native, react native fetch api, react native api json, react native fetch data from api, react native fetching api, react native json api, react native json parsing, react native redux tutorial, react native redux, redux react native, redux react native tutorial for beginners, redux react native tutorial, call api in react native, React native fetch post

Id: DYJVl6vVCEI

Length: 8min 17sec (497 seconds)

Published: Fri Jun 11 2021