add Zustand Counter

react-advanced-tag1/package-lock.json

@@ -11,7 +11,8 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.5.0",
-        "react-scan": "^0.3.3"
+        "react-scan": "^0.3.3",
+        "zustand": "^5.0.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -6048,6 +6049,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.3",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/zustand/-/zustand-5.0.3.tgz",
+      "integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }

react-advanced-tag1/package.json

@@ -19,7 +19,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.0",
-    "react-scan": "^0.3.3"
+    "react-scan": "^0.3.3",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
@@ -39,4 +40,4 @@
     "vite": "^6.2.0",
     "vitest": "^3.1.1"
   }
-}
+}

react-advanced-tag1/src/App.tsx

@@ -8,6 +8,7 @@ import EffectExercisesPage from './routes/EffectExercisesPage'
 import FormsPage from './routes/FormsPage'
 import MemoCallbackPage from './routes/MemoCallbackPage'
 import ComponentWrapperPage from './routes/ComponentWrapperPage'
+import ZustandCounterPage from './routes/ZustandCounterPage'
 
 function App() {
 
@@ -19,7 +20,7 @@ function App() {
             <Route path="/forms" element={<FormsPage />} />
             <Route path="/memocallback" element={<MemoCallbackPage />} />
             <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
-
+            <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
           </Routes>
         </MainLayout>
 }

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx

@@ -5,7 +5,7 @@ interface ComponentWrapperProps {
     children: React.ReactNode;
 }
 export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
-    console.log("ComponentWrapper rendered");
+    console.log("ComponentWrapper rendered:", title);
     return (
         <div className='component-wrapper'>
             {title && <h2>{title}</h2>}

react-advanced-tag1/src/common/components/Header/Navigation.tsx

@@ -8,6 +8,7 @@ export default function Navigation () {
                 <li><a href="/forms">Forms</a></li>
                 <li><a href="/memocallback">Memo und Callback</a></li>
                 <li><a href="/componentwrapper">Component Wrapper</a></li>
+                <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
             </ul>
         </nav>);
 }

react-advanced-tag1/src/common/stores/counter-store.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+}
+
+const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));
+
+export default useCounterStore;

react-advanced-tag1/src/routes/ComponentWrapperPage.tsx

@@ -4,6 +4,7 @@ import Modal from "../common/components/Modal";
 import { useState } from "react";
 
 export default function ComponentWrapperPage() {
+  
   const [modalOpen, setModalOpen] = useState(false);
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>

react-advanced-tag1/src/routes/ZustandCounterPage.tsx

@@ -0,0 +1,18 @@
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import useCounterStore from "../common/stores/counter-store";
+
+export default function ZustandCounterPage() {
+  const {decrement, increment} = useCounterStore();
+  return (
+      <ComponentWrapper title='Zustand Counter'>
+          <button onClick={increment}>Increment</button>
+          <button onClick={decrement}>Decrement</button>
+          <CounterValue />
+      </ComponentWrapper>
+  );
+}
+
+function CounterValue() {
+  const count = useCounterStore((state) => state.count);
+  return <p>Count: {count}</p>;
+}