Add custom db read support

src/pages/Home/Home.tsx

@@ -50,10 +50,6 @@ const Home: FC<Props> = (): JSX.Element => {
 }
 
 // Fetch server-side data here
-export const loadData = (): AppThunk[] => [
-    fetchWishListIfNeed(),
-    fetchJavGameListIfNeed(),
-    // More pre-fetched actions...
-]
+export const loadData = (): AppThunk[] => [fetchWishListIfNeed(), fetchJavGameListIfNeed()]
 
 export default memo(Home)

src/pages/Register/RegisterPage.tsx

@@ -1,22 +1,48 @@
+import { FC, useEffect, memo } from "react"
 import { RouteComponentProps } from "react-router-dom"
-import { useDispatch } from "react-redux"
-import { FC, memo } from "react"
+import { useDispatch, useSelector, shallowEqual } from "react-redux"
 import { Helmet } from "react-helmet"
+
+import { AppState, AppThunk, ValueRequest } from "../../store"
+import { fetchPreVolunteerCountIfNeed } from "../../store/preVolunteerCount"
+import { RegisterForm } from "../../components"
 import styles from "./styles.module.scss"
-import RegisterForm from "../../components/RegisterForm/RegisterForm"
 
 export type Props = RouteComponentProps
 
-const RegisterPage: FC<Props> = (): JSX.Element => {
+function useList(
+    stateToProp: (state: AppState) => ValueRequest<number | undefined>,
+    fetchDataIfNeed: () => AppThunk
+) {
     const dispatch = useDispatch()
-    return (
-        <div className={styles.registerPage}>
-            <div className={styles.registerContent}>
-                <Helmet title="RegisterPage" />
-                <RegisterForm dispatch={dispatch} />
-            </div>
-        </div>
-    )
+    const { readyStatus, value } = useSelector(stateToProp, shallowEqual)
+
+    // Fetch client-side data here
+    useEffect(() => {
+        dispatch(fetchDataIfNeed())
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch])
+
+    return () => {
+        if (!readyStatus || readyStatus === "idle" || readyStatus === "request")
+            return <p>Loading...</p>
+
+        if (readyStatus === "failure") return <p>Oops, Failed to load!</p>
+
+        return <RegisterForm dispatch={dispatch} preVolunteerCount={value} />
+    }
 }
 
+const RegisterPage: FC<Props> = (): JSX.Element => (
+    <div className={styles.registerPage}>
+        <div className={styles.registerContent}>
+            <Helmet title="RegisterPage" />
+            {useList((state: AppState) => state.preVolunteerCount, fetchPreVolunteerCountIfNeed)()}
+        </div>
+    </div>
+)
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [fetchPreVolunteerCountIfNeed()]
+
 export default memo(RegisterPage)