SyntaxCheck out the docs
// Import the createApi and fetchBaseQuery functions from the RTK Query library
import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
// Create an API service using the createApi function
export const productsAPI = createApi({
// Specify a unique name for the API slice in the Redux store
reducerPath: "productsAPI",
// Specify a base query function that will be used to make network requests
// In this case, we use the fetchBaseQuery function that is a wrapper around the native fetch API
baseQuery: fetchBaseQuery({
// Specify the base URL for the API endpoints
baseUrl: "",
}),
// Define the endpoints for the API service using a builder callback
// The builder provides methods for defining query and mutation endpoints
endpoints: (builder) => ({}),
});
// Export the auto-generated hooks for the defined endpoints
// The hooks allow us to easily perform queries and mutations in our React components
export const {} = productsAPI;- Inside the
endpointscallback, we can define our endpoints using thebuilderobject. Thebuilderobject provides methods for defining query and mutation endpoints.
//here getProductByName is the name of the endpoint and builder.query is the method to define query endpoints and query is the callback function that will be called when the endpoint is used.
getProductByName: builder.query({
query: () => ``,
})//here useGetProductByNameQuery is the name of the hook that will be used to call the endpoint
// syntax: use + endpoint name(First letter capital) + Query
export const {useGetProductByNameQuery} = productsAPI;final
import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
export const productsAPI = createApi({
reducerPath: "productsAPI",
baseQuery: fetchBaseQuery({
baseUrl: "",
}),
endpoints: (builder) => ({
getProductByName: builder.query({
query: () => ``,
}),
}),
});
export const {useGetProductByNameQuery} = productsAPI;- Define the base URL for the API endpoints
//this will be the base url for the endpoints
baseUrl: "https://jsonplaceholder.typicode.com"//This will be the endpoint
query: () => `users`final
import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
export const productsAPI = createApi({
reducerPath: "productsAPI",
baseQuery: fetchBaseQuery({
baseUrl: "https://jsonplaceholder.typicode.com",
}),
endpoints: (builder) => ({
getProductByName: builder.query({
query: () => `users`,
}),
}),
});
export const {useGetProductByNameQuery} = productsAPI;- Create store and use it in the provider then wrap the layout with the provider
import {configureStore} from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {},
});ReduxProvider.tsx
"use client";
import React from "react";
import {store} from "../store";
/* Core */
import {Provider} from "react-redux";
/* Instruments */
export const ReduxProvider = (props: React.PropsWithChildren) => {
return <Provider store={store}>{props.children}</Provider>;
};Layout.tsx
import "./globals.css";
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import React from "react";
import {ReduxProvider} from "@/redux/Provider/ReduxProvider";
const inter = Inter({subsets: ["latin"]});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<ReduxProvider>
<body className={inter.className}>{children}</body>
</ReduxProvider>
</html>
);
}- Inside the store reducer add the api reducer
[productsAPI.reducerPath]
:
productsAPI.reducerfinal
//store.ts
import {configureStore} from "@reduxjs/toolkit";
import {productsAPI} from "@/redux/slice/api";
export const store = configureStore({
reducer: {
[productsAPI.reducerPath]: productsAPI.reducer,
},
});