Add useReducer

Author: breadthe

src/routes/(hooks)/useReducer/+page.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

src/routes/(hooks)/useReducer/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types"
+
+export const load = (async ({ params }) => {
+    return {
+        title: "useReducer",
+        react: (await import("./react.jsx?raw")).default,
+        svelte: (await import("./svelte.svelte?raw")).default,
+    }
+}) satisfies PageLoad

src/routes/(hooks)/useReducer/react.jsx

@@ -0,0 +1,25 @@
+import React, { useReducer } from 'react'
+
+const initialState = { count: 0 }
+
+function reducer(state, action) {
+    switch (action.type) {
+        case 'increment':
+            return { count: state.count + 1 }
+        case 'decrement':
+            return { count: state.count - 1 }
+        default:
+            throw new Error()
+    }
+}
+
+export default function Counter() {
+    const [state, dispatch] = useReducer(reducer, initialState)
+    return (
+        <>
+            Count: {state.count}
+            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
+        </>
+    )
+}

src/routes/(hooks)/useReducer/svelte.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { writable } from "svelte/store"
+
+	const initialValue = 0
+	const count = writable(initialValue)
+
+	count.increment = () => {
+		count.update((state) => state + 1)
+	}
+	count.decrement = () => {
+		count.update((state) => state - 1)
+	}
+</script>
+
+Count: {$count}
+<button on:click={count.decrement}>-</button>
+<button on:click={count.increment}>+</button>

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 	let tile2Url = "/useEffect"
 	let tile3Url = "/useMemo"
 	let tile4Url = "/useRef"
+	let tile5Url = "/useReducer"
 </script>
 
 <!-- App Shell -->
@@ -79,6 +80,14 @@
 					href={tile4Url}
 					class={tile4Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
 				>
+				<AppRailTile
+					label="useReducer"
+					title="useReducer"
+					value={4}
+					tag="a"
+					href={tile5Url}
+					class={tile5Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
+				>
 			</svelte:fragment>
 
 			<svelte:fragment slot="trail">