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>
   );
 };