redux

src/container/detail/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import Heading from '../../components/heading';
 import { HeadingVariant } from '../../components/heading/types';
+import { useParams } from 'react-router-dom';
 
 const DetailPage = (): React.ReactElement => {
-  return <Heading variant={HeadingVariant.h2}>Detail Page</Heading>;
+  const { id } = useParams();
+  return <Heading variant={HeadingVariant.h2}>Detail Page {id} </Heading>;
 };
 
 export default DetailPage;

src/container/list/index.tsx

@@ -1,30 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Heading from '../../components/heading';
+import { useGetListQuery } from '../../store/api';
 
 const ListPage = (): React.ReactElement => {
-  const [error, setError] = useState<string>(null);
-  const [data, setData] = useState<Array<{ id: number; title: string; description: string }>>();
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const handle = async () => {
-      setIsLoading(true);
-      try {
-        const res = await fetch('/api/list');
-        const data = await res.json();
-        if (res.ok) {
-          setData(data);
-        } else {
-          setError(data.message);
-        }
-      } catch (e) {
-        setError(e.message);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    handle();
-  }, []);
+  const { data, isLoading, error } = useGetListQuery(undefined);
 
   return (
     <>

src/container/main/index.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
+import { store } from '../../store';
+import { Provider } from 'react-redux';
 
 const Main = (): React.ReactElement => {
-  return <RouterProvider router={router} />;
+  return (
+    <Provider store={store}>
+      <RouterProvider router={router} />
+    </Provider>
+  );
 };
 
 export default Main;

src/service/list/index.ts

@@ -0,0 +1,11 @@
+import { network } from '../network';
+import { GetListResponse } from './types';
+
+class ListService {
+  async getList() {
+    const res = await network.get<GetListResponse>('/list');
+    return res.data;
+  }
+}
+
+export const listService = new ListService();

src/service/list/types.ts

@@ -0,0 +1,7 @@
+export interface ListItem {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export type GetListResponse = Array<ListItem>;

src/service/network.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+import { getConfigValue } from '@brojs/cli';
+
+const baseUrl = getConfigValue('kfu-24-teacher.api');
+
+export const network = axios.create({ baseURL: baseUrl });

src/store/api.ts

@@ -0,0 +1,29 @@
+// Need to use the React-specific entry point to import createApi
+import { createApi, fetchBaseQuery, QueryReturnValue } from '@reduxjs/toolkit/query/react';
+import { GetListResponse } from '../service/list/types';
+import { listService } from '../service/list';
+
+const createQueryFromPromise =
+  <ARGS, RES>(fn: (...args: Array<ARGS>) => Promise<RES>) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async (...args): Promise<QueryReturnValue<RES, any, any>> => {
+    try {
+      const data = await fn(...args);
+      return { data };
+    } catch (e: unknown) {
+      return { error: e };
+    }
+  };
+
+// Define a service using a base URL and expected endpoints
+export const api = createApi({
+  reducerPath: 'api',
+  baseQuery: fetchBaseQuery({ baseUrl: '' }),
+  endpoints: (builder) => ({
+    getList: builder.query<GetListResponse, undefined>({
+      queryFn: createQueryFromPromise(() => listService.getList())
+    })
+  })
+});
+
+export const { useGetListQuery } = api;

src/store/index.ts

@@ -0,0 +1,20 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { api } from './api';
+import { setupListeners } from '@reduxjs/toolkit/query';
+
+export const store = configureStore({
+  reducer: {
+    // Add the generated reducer as a specific top-level slice
+    [api.reducerPath]: api.reducer
+  },
+  // Adding the api middleware enables caching, invalidation, polling,
+  // and other useful features of `rtk-query`.
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
+});
+
+setupListeners(store.dispatch);
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;