Use custom hook

hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useCounter"
+export * from "./useThinOut"

hooks/useCounter.ts

@@ -0,0 +1,30 @@
+import { useDispatch, useSelector } from "react-redux"
+import { CounterActions, countSelector } from "../store/counter"
+
+type CounterOperators = {
+  count: number
+  increment: () => void
+  decrement: () => void
+  calculate: (inputNumber: number) => void
+}
+
+/**
+ * Counter custom-hooks
+ * @see https://reactjs.org/docs/hooks-custom.html
+ */
+export const useCounter = (): Readonly<CounterOperators> => {
+  const dispatch = useDispatch()
+
+  return {
+    count: useSelector(countSelector),
+    increment: () => dispatch(CounterActions.increment()),
+    decrement: () => dispatch(CounterActions.decrement()),
+    calculate: (inputNumber: number) => {
+      dispatch(
+        CounterActions.calculate({
+          inputNumber: inputNumber,
+        })
+      )
+    },
+  }
+}

hooks/useThinOut.ts

@@ -0,0 +1,47 @@
+import { useDispatch, useSelector } from "react-redux"
+import {
+  IReduxSagaState,
+  ReduxSagaActions,
+  reduxSagaDebounceSelector,
+  reduxSagaThrottleSelector,
+} from "../store/redux-saga"
+
+type ThinOutOperators = {
+  debounce: (inputValue: string) => void
+  debounceState: IReduxSagaState
+  throttle: (inputValue: string) => void
+  throttleState: IReduxSagaState
+}
+
+/**
+ * Debounce and throttle custom-hooks
+ * @see https://reactjs.org/docs/hooks-custom.html
+ */
+export const useThinOut = (): Readonly<ThinOutOperators> => {
+  const dispatch = useDispatch()
+  const reduxSagaDebounceState = useSelector(reduxSagaDebounceSelector)
+  const reduxSagaThrottleState = useSelector(reduxSagaThrottleSelector)
+
+  const handleDebounce = (inputValue: string) => {
+    dispatch(
+      ReduxSagaActions.fetchDebounce({
+        input: inputValue,
+      })
+    )
+  }
+
+  const handleThrottle = (inputValue: string) => {
+    dispatch(
+      ReduxSagaActions.fetchThrottle({
+        input: inputValue,
+      })
+    )
+  }
+
+  return {
+    debounce: handleDebounce,
+    debounceState: reduxSagaDebounceState,
+    throttle: handleThrottle,
+    throttleState: reduxSagaThrottleState,
+  }
+}

pages/redux-saga.tsx

@@ -1,7 +1,6 @@
 import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
-import { useDispatch, useSelector } from "react-redux"
 import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import {
@@ -10,12 +9,8 @@ import {
 } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page, SagaSetting } from "../constants"
+import { useThinOut } from "../hooks"
 import { IPagePayload, PageActions } from "../store/page"
-import {
-  ReduxSagaActions,
-  reduxSagaDebounceSelector,
-  reduxSagaThrottleSelector,
-} from "../store/redux-saga"
 
 const useStyles = makeStyles((_: Theme) =>
   createStyles({
@@ -28,25 +23,7 @@ type Props = {}
 function ReduxSaga(props: Props) {
   const {} = props
   const classes = useStyles(props)
-  const dispatch = useDispatch()
-  const reduxSagaDebounceState = useSelector(reduxSagaDebounceSelector)
-  const reduxSagaThrottleState = useSelector(reduxSagaThrottleSelector)
-
-  const onDebounce = (inputValue: string) => {
-    dispatch(
-      ReduxSagaActions.fetchDebounce({
-        input: inputValue,
-      })
-    )
-  }
-
-  const onThrottle = (inputValue: string) => {
-    dispatch(
-      ReduxSagaActions.fetchThrottle({
-        input: inputValue,
-      })
-    )
-  }
+  const { debounce, debounceState, throttle, throttleState } = useThinOut()
 
   return (
     <Layout className={classes.root}>
@@ -62,20 +39,20 @@ function ReduxSaga(props: Props) {
                 </Typography>
               </>
             }
-            storeState={reduxSagaDebounceState}
+            storeState={debounceState}
             responseResultMax={10}
             interval={SagaSetting.DEBOUNCE_INTERVAL}
-            onChange={onDebounce}
+            onChange={(inputValue: string) => debounce(inputValue)}
           />
         </SpacingPaper>
 
         <SpacingPaper>
           <ReduxSagaSample
             title="throttle"
-            storeState={reduxSagaThrottleState}
+            storeState={throttleState}
             responseResultMax={10}
             interval={SagaSetting.THROTTLE_INTERVAL}
-            onChange={onThrottle}
+            onChange={(inputValue: string) => throttle(inputValue)}
           />
         </SpacingPaper>
       </HeaderArticleContainer>

pages/redux.tsx

@@ -7,13 +7,12 @@ import {
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React, { useState } from "react"
-import { useDispatch, useSelector } from "react-redux"
 import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
-import { CounterActions, countSelector } from "../store/counter"
+import { useCounter } from "../hooks"
 import { IPagePayload, PageActions } from "../store/page"
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -38,19 +37,8 @@ type Props = {
 function Redux(props: Props) {
   const { defaultInputNumber: defaultCount } = props
   const classes = useStyles(props)
-  const dispatch = useDispatch()
-  const count = useSelector(countSelector)
   const [inputNumber, setInputNumber] = useState<number>(defaultCount)
-
-  /**
-   * Increment
-   */
-  const handleIncrement = () => dispatch(CounterActions.increment())
-
-  /**
-   * Decrement
-   */
-  const handleDecrement = () => dispatch(CounterActions.decrement())
+  const { count, increment, decrement, calculate } = useCounter()
 
   /**
    * Change inputNumber value
@@ -63,17 +51,6 @@ function Redux(props: Props) {
     }
   }
 
-  /**
-   * Calculate input number
-   */
-  const handleCalculate = () => {
-    dispatch(
-      CounterActions.calculate({
-        inputNumber: Number(inputNumber),
-      })
-    )
-  }
-
   const CurrentNumber = () => (
     <Avatar className={classes.counter}>{count}</Avatar>
   )
@@ -86,11 +63,11 @@ function Redux(props: Props) {
             Increment / Decrement
           </Typography>
           <CurrentNumber />
-          <Button variant="contained" color="primary" onClick={handleIncrement}>
+          <Button variant="contained" color="primary" onClick={increment}>
             + 1
           </Button>
           &nbsp;
-          <Button variant="contained" color="primary" onClick={handleDecrement}>
+          <Button variant="contained" color="primary" onClick={decrement}>
             - 1
           </Button>
         </SpacingPaper>
@@ -114,7 +91,7 @@ function Redux(props: Props) {
             <Button
               variant="contained"
               color="primary"
-              onClick={handleCalculate}
+              onClick={() => calculate(inputNumber)}
             >
               calculate
             </Button>