feat(apiSlice): api slice with common modules, get and post

src/libs/features/apiSlice.ts

@@ -0,0 +1,38 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const tagTypes = ['A', 'B', 'C'] as const;
+type Tag = (typeof tagTypes)[number];
+type Param = {
+  data?: Record<string, any>;
+  body?: Record<string, any>;
+  url: string;
+  tag: Tag;
+};
+// Query Builder
+const buildQuery = (data?: Record<string, any>) =>
+  new URLSearchParams(data).toString();
+
+export const apiSlice = createApi({
+  reducerPath: 'api',
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  tagTypes,
+  endpoints: (builder) => ({
+    // Common Endpoints:
+    get: builder.query({
+      query: (param: Param) =>
+        param.data ? `${param.url}?${buildQuery(param.data)}` : param.url,
+      providesTags: (result, error, param) => [{ type: param.tag }], // Cash Provider Tags
+    }),
+    post: builder.mutation({
+      query: (param: Param) => ({
+        url: param.url,
+        method: 'POST',
+        body: param.body,
+      }),
+      invalidatesTags: (result, error, param) => [{ type: param.tag }], // Cash Invalidator Tags
+    }),
+  }),
+});
+
+// Export the auto-generated hook for the query endpoints
+export const { useGetQuery, usePostMutation } = apiSlice;

src/libs/features/index.ts

@@ -1,3 +1,4 @@
+export * from './apiSlice';
 export * from './auth/authSlice';
 export * from './catFacts/catFactsSlice';
 export * from './counter/counterSlice';

src/libs/store.ts

@@ -1,14 +1,22 @@
 import { configureStore } from '@reduxjs/toolkit';
 
-import { authReducer, catFactsReducer, counterReducer } from '@/libs/features';
+import {
+  apiSlice,
+  authReducer,
+  catFactsReducer,
+  counterReducer,
+} from '@/libs/features';
 
 export const makeStore = () => {
   return configureStore({
     reducer: {
       counter: counterReducer,
       catFacts: catFactsReducer,
       auth: authReducer,
+      [apiSlice.reducerPath]: apiSlice.reducer,
     },
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(apiSlice.middleware),
   });
 };