CreateApi | Redux toolkit | Data Fetching in Redux Made Easy With RTK Query | React Native | Redux

in this lecture we are going to explain about one of the main core functionality of redex toolkit create API so we are going to demonstrate one of the example using Create APA how we can use create API as a reducer and a API heating okay now what I am going to do here I am going to import my project so this is a project I'll take a query so we have imported the project so inside this project what I am going to do install our Redux toolkit we can just install eon at the red redacts yes we can just check out the documentation for installation toolkit um yes index toolkit here is that installation Library you can just go to the get started section now here is you can see the installation setup you can just install these two Library so we can just install yes yarn add yes so Redux toolkit we are using for all all our digital index everything react Redux we are using for providing so we have importing provider on app.js right basically it is it will be imported on provider so we can just install these two Library yes it's installed now what I'm going to do here I am going to create one example one app.js file is already there now I am going to delete all this here now simply I'm going to uh type uh pure function here export default yeah we can have view Style Flex equal to 1 background color we can just say red okay now inside this one we can just import react from react also we can import The View from react native five now what we can do we can just make this as a arrow function we can just remove this old in cons app Yes we made it as an arrow function here is your arrow function now we can just export this one export default app now it should render a background color we have to make this a style okay now let's see what happens if you just clear yes right now inside this part I'm going to do I'm going to call an API called official uh joke APA okay so here I am going to call an API first of all we need to create a state for loader set louder you stayed we can set it to false right now the next thing is we need a variable to store the data constada set data right we can just create as a null or and Define whatever we can we can just create a null for now now then error right if any error come we can just have a variables to store that error set error you stayed yes now we have created all our state we can just call our API right use effect okay now here is the use effect in this I am going to call the API now the API is if you look into the API here is the API you can just copy from here yes this is the API start programming or programming random so if I just call this AP here you can see it's return a an ID now if you just copy this into our program here you can see we can just say const base here we can split this API into base URL right so base URL is equal to this one now rather than adding all this as base URL what we can do we can make this as a type whatever we can do we can just pass this as a base URL file now here I am going to hit the API using the fetch method before that one what I need to do I need to set the loader right set loader true now here I am going to hit the EPA fetch so we can just concat our string using base URL so we can just have base underscore URL add a dollar symbol before the string and we can concatenate the other string whatever we have so we can just check out the API so rest is programming slash rather right so we can just have programming slash data already we have added slashes we don't want this one and we can just I made this response right so we can just make this as a synchronous so const I think API code and scoring as an API here fine now what we can do we can just paste this in here now we need to make a Sync here right and we can just have let response is equal to a bit fetch API we can just console the response whether we are receiving the response properly before we are go before we are adding any other logic we can just console it and what we can do we need to call this API right so we can just APA call here on the use effect so we have declared the API call here and we just created this one we can just format the document once more yes now what we can do we can just go to the console and just run this debug here in the debug you can see let's see this run the application once more article it yeah here you can see the response is coming now what we need we need to make this response readable so we can just have this as response dot Json right so we can just have a Json here so that response will be Json right we can just add one more Json now if you just check here you can see the data whatever we need we are getting the data what we can do we can set the data here set data response of zero so we don't want to response we don't want to add an SRA we can just add as an object if you just checks once more the M first element will be an object right here you can see this is an object right now the next thing is we need to call the loader API so we can just make our loader false now if I any error comes so if any error come on the API call we can just set into error method right so we can just have catch here error set error as error and then also we can just make this as here now we have a response is response should be response you can just have yes now if I just go here if I can put loader just having an order View Style Flex equal to 1 align item sender justify content sender and we can import activity indicator okay so we can just import our activity indicator color can have a white or we can just have a black you know this we can make into white right now if I just reload let's see what's happened we can just run the application once more yes any error is coming that's great if for initial time loader is true false we have a responses here yes now we can just reload the function once more loader value we can just print whatever the value is coming on loader we can have console log yes why it is printing because we have we don't have black let's see yes the API is already loaded right so that's why it's showing so we can just have white here itself and we can just have a data printing here so that we can understand if we have got we have received the response right now what we can do we can just have a text and I'm just printing data dot if I just need to look into the response here you can see ID is there type is there so we can just have a punch line right so we can just have data dot punchline and we can just make this has some styling color you can just have black and font size we can have thirteen five now if I just format the document let's see what's happened uh text is not important we can just import the text now if I see everything she has the data is printing here we can just make it align at the center also we can just reduce the texture Lanes sender and also justify content sender a lane item Center so this will make our text at the center right we can just have a format this document yes now you can see the data is printing here so we have completed all our API heating format using the pure function using the fetch method right now what the next thing is what I am going to do I am going to replicate all this this thing you see uh Redux toolkit method okay I am going to create a store I am going to create a slice method for API calling using the create API method right so what we can do we can just create one folder inside here SRC uh inside SRC I'm going to create one more file store.jos okay so inside store what we are going to do we are going to create our store right so what we can do import config store from Redux toolkit okay so we have imported ours to do next toolkit store now we can just create export const ore here configure stored what I am doing to configure stories added the next thing is we need to add a reducer right so we can just have an empty reducer for now we are not adding any like this sir now the next thing is we can have a middleware for running the application right so we can just have a middleware get here the field middleware is a callback we can just have default middleware now we need to call this here get the default middleware okay now what we need we need to concat any middleware here right so we have created a middleware with reducer now we need to import this in our app.js right so we can just have we can just make all this code into app.js file so we can just create a now I am going to paste this home screen right you can just have home screen here we can just have a home screen so inside this app.js what I'm going to do just import home screen from SRC then home screen right now we can just remove all this logic we don't want because we are already returning this all logic in our uh home screen so we can just have an home screen here right now what we need we can just refresh everything should work as it before yes everything is working perfectly now what we need we need to import provider so import provider from react Redux so that's why we have installed react Red X react Redux we are using for provider okay now we can just have provider and we can have a store writer so we can just import our store even board store it should be in the bracket so you can just import store from SRC we have created our store right now you can just apply this store here store yes and we can encapsulate this home screen inside this provider now if I just console.log we can just check store is getting Value Store dot get state it should give an error we have not passed a valid reducer now we can just go here and refresh yes as I mentioned has store does not have valid but still have the values are coming we have receiving the values right so we have an empty object but we are getting error we didn't pass the value reducer right we have only passed a empty object right now the next thing is next thing is we are going to create all the API logic whatever we have written inside the application inside home screen we are going to change into another file okay so what we can call this file has uh we can just call this asset jogs or we can just say API dot Js okay now inside this ap.js we are going to configure all the API calling whatever we have written right so we have written a lot of logic in the home screen right here you can see this loader logic everything we have written right now we are going to create this logic inside our api.js file first of all what we are going to do we are going to import our create API method create APA from Redux toolkit okay and also we can just import fetch base pory fat based Curry from Android index toolkit bar we are just bar we are Curry bar react so we are importing from Linux toolkit Korean react so we have imported this one and create APN now what we are going to do we are going to create our API calling method right so we can just have export const we will just declare a variable we will just export cons here I am going to API jock AP because it is already a programming slash joke right so if you can just check here it's a jogs API right so you can just call it job API jokes API create API right also we can just change this into jokes ap.js file so you can just change into jog dot ap.js file yes now here what I am going to do I need to give a reducer path so that it can store all our value so what I am going to do I'm just giving a random name okay jokes API you can just say jokes API so this is the reducer which will handle all the API response fear we have created we have familiarize with the API response you're seeing on the slides create thunk action right if you are not watching the create tank video you can just refer it to the create tank video right now what I am going to do here I am just passing base query okay here I am going to pass base query what is a base URL which I need to use I'm just creating a base query if you are familiar with axios instant you will creating axio since then right so inside that instead what you are doing you will create a base instant right so just like that we are going to create a fetch based query instance here now here you can just say add or base URL right so what I am going to do inside home screen just copy this base URL to here yes we have passed our base URL now the next thing is we need to pass the end point right so inside here home screen we are just appending the hand point right at the excite endpoint this is base URL and this is end point right so we can just have created our base query right just like Action System we have created our base college now the second thing is here you can see we are passing an end point where appending point right if you just look into your uh here you can example here you can see and just passing a type after job right so programming my type so we can just programming here you can see I am getting a job from programming section right so we need to pass this will be a dynamic value and this will be a constant value so we have to create like that our APA right so for that one what I'm going to do I'm going to create an endpoint so endpoint will return a method called Builder so Builder is the method here what I am going to do I am just creating a function which is a direct return and then we can just make this as a builder dot query method okay so we can just have so here you can just create a method get so you can just type get joke buy type right here you can just type get joke by types now we need to create the query right so we can just have filter Dot Corey Builder dot Curry now if I just put in an attracted inside this one we are going to create a query okay now we need to pass the type as we are passing the type as program so we can just pass the program type so inside this one we are going to create our type okay so we can just have dollar type and slash we can have random okay so if you pass the query type programming it will happen and it will append you to the paste URL now before going to our implementation what we can do we can just console all this thing right const jobs API now if I just go here let's refresh the function yes here you can see the all the consoles are coming right now if I just check if there is an end point here get jokes by type endpoint is there available and use enhance endpoint is the middleware is the reducer there reducer path is there there is a hook is available GS used get J used get joke by type query right what we can do we can just pass this or export this as method right so we can export const [Music] now here I am just exporting this from jogs API fine so we have created our jobs API now inside the store what we can do we we have to sorry I already done that one what we can do we can just import our all our so this was our previous reducer now inside this one what I'm going to do I'm going to import my reducer okay so this is our store import so inside the store what we need to import docs API right jokes API from jokes APA and also I'm going to import one more method from um the Redux tool you can set up listeners so inside setup listener what I'm going to do I'm just passing so I'll type listeners store dot dispatch okay now here if you just go to the console again you can see a variable is already declared right jogs EPA so we don't want to declare a variable in the reducer we can just use reducer another string for the reducer we can just use whatever we have already given the name here jokes APA reducer path okay now the next thing is what we can do we can just Ascend our reducer here jokes API dot producer so we have assigned API here so we have assigned the reducer here now we have what we need the next thing is the final thing is we need to contact our middleware right so we can just have jobs API Dot middleware so we have attached our all our jobs API concat slash Nation inside our reducer now we can just check whether it is running fine yes I guess reload the function once more here you can see inside jokes API we are getting the response right yes here you can see the data is there response is there everything is clear there is no error right now inside home screen we need to remove all the Epic code we can just remove all the API code and logic we can just have a return null here before and this return now okay now what I'm going to do here I'm just going to import my use dead query from our docs API right so what I am going to do I am going to use this hook as a console here console just console I'm just passing my type okay just passing my type here programming let's see what is it printing so we can just go here let's print see here you can see the values is printing on initializer right there are data is the loader is there is error is there everything right every data data whatever we have is fulfilled in the fulfilled section you can see data is coming so we have created a hook using Create slides so inside this one Whatever values we need we need loader and also we need data right so data is needed the second thing is error if any error is coming right so we can just have ease error flag okay is error flag right here it's it can distract from this use the rig method right choose very hook now if I just go here and I remove the null value yes here you can see the values are printing now if I just go refresh once more and reload the app once more here you can see the data is coming here and but the data is not trending right so if I just go here console my data what is the problem here I am just accessing as an object right if you can just go data Zord 0 dot punchline it will work because now it's coming as an array direct array is coming right so we can just refresh and let's see the same thing whatever we have before it's coming as in right now oh we have some other we can just check what is data is coming console.log data and if I refresh there is the data is coming so inside this data is coming right if you just check out convert undefined so the data is inside the data right so you can just check what is the data is actually coming spending is there home screen data dot that you can just check data.data what is coming yes yes now if I just type refresh meanwhile we come before giving error we can just comment this one so that we can easily understand the error yes now let's see let us checks uh let us check once more what the data is coming actually it has some error you can just have data foreign loader value will be is loading not loader that's why the error is coming you can just have ease loading inside here is loading fine now if I just refresh it should work as it's before uh you can have a yes yes it's coming because uh only status is fulfilled it's only rendering so uh that time is uh we can just make each success okay so if you success only we can just have to render this one fine now we can just format the document if the success is not that we can just return null so on the success tab it will show the punchline now if I just go to my uh this access is not defined his success should be imported from the query okay so we can just have its access also if you can just make it data is available only that time should be printed it's also fine right so we can just have data now if I just go to my example here you can see this is coming right so we have completely completed all our EPA code using a single query and this data is storing in our reducer right so here you can see this is API calling all the API call with a single file we have created an API call structure and we have stored all our data in the reducer you can see reducer value we have stored see this is the reducer clear so that is the advantage of create API method you can create combine the API call and reducer simultaneously video [Music]

Channel: JAS ACADAMY

Views: 5,473

Keywords: JASACADAMY, Technical, Coding, React native, nodejs, Devops, News, interview tips, resume format, resume writing, career, communication, social meda, time management, polytechnic, diploma, Perfomance, development, udemy, google, covid, jasacadamy

Id: 2hTkVEmhQZk

Length: 27min 20sec (1640 seconds)

Published: Sat Oct 08 2022