From a1a85e47430fc2fa59b6e682b62241977fe83667 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Mon, 26 Oct 2026 11:38:50 +0100
Subject: [PATCH]

---
 .../components/examples/ExampleUseReducer.jsx | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseReducer.jsx b/06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseReducer.jsx
index d10ea12..8cb817a 100644
--- a/06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseReducer.jsx
+++ b/06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseReducer.jsx
@@ -9,13 +9,17 @@ const initialState = {
 // Reducer Funktion verwaltet das state Objekt. Über diese Funktion lässt sich das "komplexere" state-Objekt gezielt verändern.
 function reducer(state, action) {
   // action Objekt hat immer folgende Eigenschaften: {type: 'ACTION_NAME', payload: changeValue }
-  const { type } = action;
+  const { type, payload = 1 } = action;
 
   switch (type) {
     case 'INCREASE':
       return { ...state, counter: state.counter + 1 };
     case 'DECREASE':
       return { ...state, counter: state.counter - 1 };
+    case 'DOUBLE':
+      return { ...state, counter: state.counter * 2 };
+    case 'INC_VALUE':
+      return { ...state, counter: state.counter + payload };
     default:
       console.warn('Action Type not found');
       return state;
@@ -39,10 +43,17 @@ const ExampleUseReducer = (props) => {
       case 'decrease':
         dispatch({ type: 'DECREASE' });
         break;
+      case 'double':
+        dispatch({ type: 'DOUBLE' });
+        break;
       default: //nothing
     }
   };
 
+  const handleClickIncValue = (e) => {
+    dispatch({ type: 'INC_VALUE', payload: 5 });
+  };
+
   return (
     <div className="example-use-state">
       Counter: {state.counter}
@@ -52,6 +63,13 @@ const ExampleUseReducer = (props) => {
       <button className="btn btn-dark button-dec mx-1" aria-label="Decrease" onClick={handleClick}>
         <FaMinus />
       </button>
+      <button className="btn btn-dark button-double mx-1" aria-label="Double" onClick={handleClick}>
+        <FaPlus />
+        <FaPlus />
+      </button>
+      <button className="btn btn-dark button-double mx-1" aria-label="Increase by value" onClick={handleClickIncValue}>
+        <FaPlus /> 5
+      </button>
     </div>
   );
 };