feat: 🎸 added counter with reducer

Author: Pratham82

2024 Prep/machine_coding/react/src/App.tsx

@@ -1,11 +1,11 @@
 import './App.css'
-import { InputHookComp } from './components'
+import { CounterWithReducer } from './components'
 
 function App() {
   return (
     <div className="container">
       <h1>Vite + React</h1>
-      <InputHookComp />
+      <CounterWithReducer />
     </div>
   )
 }

2024 Prep/machine_coding/react/src/components/CounterWithReducer.tsx

@@ -0,0 +1,40 @@
+import { useReducer } from 'react'
+
+export default function CounterWithReducer() {
+  const counterReducer = (state, action: { type: string }) => {
+    switch (action.type) {
+      case 'increment': {
+        return { count: state.count + 1 }
+      }
+
+      case 'decrement': {
+        return { count: state.count - 1 }
+      }
+      default:
+        return
+    }
+  }
+  const initialState = {
+    count: 0,
+  }
+  const [state, dispatch] = useReducer(counterReducer, initialState)
+
+  const onUpdateCounter = (type: string) => {
+    dispatch({ type })
+  }
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        placeContent: 'center',
+      }}
+    >
+      <h2>Counter With Reducer</h2>
+      <h4>counter: {state?.count}</h4>
+
+      <button onClick={() => onUpdateCounter('increment')}>Increment +</button>
+      <button onClick={() => onUpdateCounter('decrement')}>Decrement -</button>
+    </div>
+  )
+}

2024 Prep/machine_coding/react/src/components/index.ts

@@ -5,6 +5,7 @@ import BatchingStates from './BatchingStates'
 import CountDownTimer from './Timer'
 import LiftingUpState from './LiftingStateUp'
 import InputHookComp from './InputCustomHookComp'
+import CounterWithReducer from './CounterWithReducer'
 
 export {
   Loader,
@@ -14,4 +15,5 @@ export {
   CountDownTimer,
   LiftingUpState,
   InputHookComp,
+  CounterWithReducer,
 }