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;