From 3244ccfa8794e59e66b9e15996381b66d6145495 Mon Sep 17 00:00:00 2001
From: Ohans Emmanuel <ohansemmanuel@gmail.com>
Date: Thu, 24 Oct 2019 16:39:07 +0200
Subject: [PATCH 1/2] complete refactor to useReducer

---
 showcase/src/patterns/index.js | 40 ++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/showcase/src/patterns/index.js b/showcase/src/patterns/index.js
index 027a8fe..9d8f3a3 100644
--- a/showcase/src/patterns/index.js
+++ b/showcase/src/patterns/index.js
@@ -1,4 +1,5 @@
 import React, {
+  useReducer,
   useState,
   useEffect,
   useCallback,
@@ -147,21 +148,32 @@ const INIT_STATE = {
 const callFnsInSequence = (...fns) => (...args) =>
   fns.forEach(fn => fn && fn(...args))
 
-const useClapState = ({ initialState = INIT_STATE } = {}) => {
-  const initialStateRef = useRef(initialState)
-  const [clapState, setClapState] = useState(initialStateRef.current)
-  const { count, countTotal } = clapState
+const clapReducer = (state, { type, initialState }) => {
+  const { count, countTotal } = state
 
-  const handleClapClick = useCallback(
-    () => {
-      setClapState({
-        count: Math.min(count + 1, MAX_CLAP),
-        countTotal: count < MAX_CLAP ? countTotal + 1 : countTotal,
+  switch (type) {
+    case 'clap':
+      return {
+        count: count + 1,
+        countTotal: countTotal + 1,
         isClicked: true
-      })
-    },
-    [count, countTotal]
-  )
+      }
+    case 'reset':
+      return initialState
+    default:
+      return state
+  }
+}
+
+const useClapState = ({
+  initialState = INIT_STATE,
+  reducer = clapReducer
+} = {}) => {
+  const initialStateRef = useRef(initialState)
+  const [clapState, dispatch] = useReducer(reducer, initialStateRef.current)
+  const { count } = clapState
+
+  const handleClapClick = () => dispatch({ type: 'clap' })
 
   const resetRef = useRef(0)
   // reset only if there's a change. It's possible to check changes to other state values e.g. countTotal & isClicked
@@ -169,7 +181,7 @@ const useClapState = ({ initialState = INIT_STATE } = {}) => {
   const reset = useCallback(
     () => {
       if (prevCount !== count) {
-        setClapState(initialStateRef.current)
+        dispatch({ type: 'reset', initialState: initialStateRef.current })
         ++resetRef.current
       }
     },

From f4485c72b6207671e9ef0bac431780ab1740fa87 Mon Sep 17 00:00:00 2001
From: Ohans Emmanuel <ohansemmanuel@gmail.com>
Date: Thu, 24 Oct 2019 16:42:21 +0200
Subject: [PATCH 2/2] use type and payload

---
 showcase/src/patterns/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/showcase/src/patterns/index.js b/showcase/src/patterns/index.js
index 9d8f3a3..011dd9b 100644
--- a/showcase/src/patterns/index.js
+++ b/showcase/src/patterns/index.js
@@ -148,7 +148,7 @@ const INIT_STATE = {
 const callFnsInSequence = (...fns) => (...args) =>
   fns.forEach(fn => fn && fn(...args))
 
-const clapReducer = (state, { type, initialState }) => {
+const clapReducer = (state, { type, payload }) => {
   const { count, countTotal } = state
 
   switch (type) {
@@ -159,7 +159,7 @@ const clapReducer = (state, { type, initialState }) => {
         isClicked: true
       }
     case 'reset':
-      return initialState
+      return payload
     default:
       return state
   }
@@ -181,7 +181,7 @@ const useClapState = ({
   const reset = useCallback(
     () => {
       if (prevCount !== count) {
-        dispatch({ type: 'reset', initialState: initialStateRef.current })
+        dispatch({ type: 'reset', payload: initialStateRef.current })
         ++resetRef.current
       }
     },