rtk

frontend/app/src/App.tsx

@@ -1,15 +1,20 @@
-import { ConfigProvider } from 'antd';
-import './App.css';
-import HeaderComponent from './components/HeaderComponent';
-import { theme } from './config/style';
+import React from "react";
+import { ConfigProvider } from "antd";
+import "./App.css";
+import HeaderComponent from "./components/HeaderComponent";
+import { theme } from "./config/style";
+import { Provider } from "react-redux";
+import { store } from "./config/store";
 
 const App = () => {
   return (
-    <ConfigProvider theme={theme}>
-    <div className="content">
-      <HeaderComponent />
-    </div>
-    </ConfigProvider>
+    <Provider store={store}>
+      <ConfigProvider theme={theme}>
+        <div className="content">
+          <HeaderComponent />
+        </div>
+      </ConfigProvider>
+    </Provider>
   );
 };
 

frontend/app/src/config/baseUrl.ts

@@ -0,0 +1 @@
+export const baseUrl = "http://localhost/api/"

frontend/app/src/config/store.ts

@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit'
+import { setupListeners } from '@reduxjs/toolkit/query'
+import { AuthApi } from '../slice/AuthApi'
+
+export const store = configureStore({
+  reducer: {
+    // Add the generated reducer as a specific top-level slice
+    [AuthApi.reducerPath]: AuthApi.reducer,
+  },
+  // Adding the api middleware enables caching, invalidation, polling,
+  // and other useful features of `rtk-query`.
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(AuthApi.middleware),
+})
+
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+setupListeners(store.dispatch)

frontend/app/src/slice/AuthApi.ts

@@ -0,0 +1,14 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { baseUrl } from '../config/baseUrl'
+
+export const AuthApi = createApi({
+  reducerPath: 'AuthApi',
+  baseQuery: fetchBaseQuery({ baseUrl: `${baseUrl}auth/` }),
+  endpoints: (builder) => ({
+    getUser: builder.query({
+      query: () => 'me/',
+    }),
+  }),
+})
+
+export const { useGetUserQuery } = AuthApi