refactor(tech record): added redux-examples

src/app/techrecord/(pages)/redux-example/page.module.css

@@ -0,0 +1,11 @@
+.redux span {
+  @apply inline-block w-12 text-xl text-center font-bold text-gray-900 dark:text-gray-100;
+}
+
+.redux button {
+  @apply mx-1 text-base text-gray-900 dark:text-gray-100;
+}
+
+.title {
+  @apply text-xl text-gray-900 dark:text-gray-100;
+}

src/app/techrecord/(pages)/redux-example/page.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable no-underscore-dangle */
+
+'use client';
+
+import { decrement, getCatFacts, increment } from '@/libs/features';
+import { useAppDispatch, useAppSelector } from '@/libs/hooks';
+import type { CatFact } from '@/types';
+
+import styles from './page.module.css';
+
+export default function ReduxExample() {
+  const count = useAppSelector((state) => state.counter.data);
+  const catFacts = useAppSelector((state) => state.catFacts.data);
+  const dispatch = useAppDispatch();
+
+  return (
+    <>
+      <h2 className={styles.title}>Counter Example</h2>
+      <div className={styles.redux}>
+        <button type="button" onClick={() => dispatch(decrement())}>
+          Decrease
+        </button>
+        <span>{count}</span>
+        <button type="button" onClick={() => dispatch(increment())}>
+          Increase
+        </button>
+      </div>
+      <h2 className={styles.title}>API Example (Cat Facts)</h2>
+      <div>
+        <button type="button" onClick={() => dispatch(getCatFacts())}>
+          Get Cat Facts
+        </button>
+        <div>
+          {catFacts &&
+            catFacts.map((catFact: CatFact) => (
+              <div key={catFact._id}>
+                <span>---------------------------</span>
+                <p>
+                  status: [ verified: {catFact.status.verified}, sentCount:{' '}
+                  {catFact.status.sentCount} ]
+                </p>
+                <p>
+                  type: {catFact.type}, id: {catFact._id}
+                </p>
+                <p>text: {catFact.text}</p>
+                <p>created date: {catFact.createdAt}</p>
+                <p>updated date: {catFact.updatedAt}</p>
+                <p>user: {catFact.user}</p>
+              </div>
+            ))}
+        </div>
+      </div>
+    </>
+  );
+}

src/app/techrecord/page.tsx

@@ -34,6 +34,12 @@ const menus = [
     ctgry: 'react-three/cannon',
     key: 5,
   },
+  {
+    title: 'Redux State Management',
+    href: 'techrecord/redux-example',
+    ctgry: 'react-redux',
+    key: 6,
+  },
 ];
 
 export const metadata: Metadata = {

src/libs/features/catFacts/catFactsSlice.ts

@@ -14,11 +14,11 @@ export const getCatFacts = AsyncThunk.create('CatFacts')({
   method: 'GET',
 });
 
-const catFactsSlice = createSlice({
+const slice = createSlice({
   name: 'catFacts',
   initialState,
   reducers: {},
   extraReducers: (builder) => AsyncReducers.create(builder)(getCatFacts),
 });
 
-export const catFactsReducer = catFactsSlice.reducer;
+export const catFactsReducer = slice.reducer;

src/types/redux.ts

@@ -2,3 +2,20 @@ export type AsyncState<D> = {
   data: D;
   status: 'fulfilled' | 'pending' | 'rejected';
 };
+
+export type CatFact = {
+  status: {
+    verified: boolean;
+    sentCount: number;
+  };
+  _id: string;
+  user: string;
+  text: string;
+  __v: number;
+  source: string;
+  updatedAt: string;
+  type: string;
+  createdAt: string;
+  deleted: boolean;
+  used: boolean;
+};