CreateApi | Redux toolkit | Data Fetching in Redux Made Easy With RTK Query | React Native | Redux
CreateApi is the core of RTK Query's functionality. It allows you to define a set of "endpoints" that describe how to retrieve data from backend APIs and other async sources, including the configuration of how to fetch and transform that data. It generates an "API slice" structure that contains Redux logic (and optionally React hooks) that encapsulate the data fetching and caching process for you.
The main source of RTK Query’s functionality comes from createApi. This is where we’ll define our endpoints and allow it to create the API slice that gives us everything we need.
In our example, we pass in an object that defines three things:
reducerPath: The unique key that defines where the Redux store will store our cache.
baseQuery: The base query to request data. The Redux team recommend that you have one API slice per base URL.
fetchBaseQuery: RKT Query also provides a lightweight wrapper around fetch queries, which allow us to build a query by just providing the base URL.
endpoints: The set of operations that we want to perform against the server. In this case, we have one, getJokeByType, which will take a type and query the endpoint ${type}/random.
Finally, because we’re using this in a React app, RTK Query will automatically generate hooks for each endpoint query (in this example, useGetJokeByTypeQuery). This is done by using createApi from '@reduxjs/toolkit/query/react'.
We hook RTK Query into our app when we set up the Redux store. The API object we created with createApi gives us everything we need:
reducerPath and reducer are created for us, which we can pass straight into the reducer parameter of configureStore.
middleware is also created for us, which will allow us to take advantage of caching, invalidation, polling, and the other features of RTK Query.
Optionally, we can use setupListeners, which will enable us to refetch the data on certain events, such as refetchOnFocus and refetchOnReconnect.
#reactnativecourse #jasacadamy #reactnativetutorial #reactjs #reactnative #reactjsdeveloper #reactjsforbeginners
rest api,restful api,rapidapi,news api,free,rest,climate change api,rapid api,selling api,code palace,rapidapi hub,applications,cheerio,what is an api,build news api,express routing,computers,app,code,http,learn programming,web scraper,programming,startup idea,learn coding,kotlin,webdev,coding,studio,android studio,coding tutorial,program,android,tutorial,tutorials,androidevs,technology,ania kubow,express.js,software development,backend developement,react query,rtk query,rtk query vs react query,rtk query app,react query application,rtk query intro,redux rtk query,rtk query react,react rtk query,redux toolkit query application,rtk query example,redux toolkit query vs react query,rtk query tutorial,redux toolkit query,react query tutorial,react query vs redux,rtk query example app,rtk query crud example,rtk query introduction,react redux toolkit query,redux toolkit query tutorial,react redux toolkit query,redux toolkit query,redux rtk query,redux toolkit query tutorial,redux toolkit query tutorials,redux toolkit react,redux toolkit tutorial,redux sagas vs redux toolkit query,redux toolkit,react redux toolkit,react rtk query,redux toolkit query application,redux toolkit query vs react query,rtk query app,toolkit,rtk query react,rtk query intro,rtk query example,redux crud,react query,react query vs redux,react query tutorial
1:00 Introduction
06:08 Api calling using useEffect
11:28 Store creation using redux toolkit
16:02 Create API integration
20:59 Fetch Base Query Integration in redux toolkit
25:31 Hook Integration
