Upgrade with-redux example to app router

examples/with-redux/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+export default nextConfig

examples/with-redux/package.json

@@ -4,29 +4,22 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "type-check": "tsc",
-    "test": "jest"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.3.6",
+    "@reduxjs/toolkit": "1.9.5",
+    "classnames": "2.3.2",
     "next": "latest",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-redux": "^7.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.1.0",
+    "waait": "1.0.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^13.0.0",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.9.1",
-    "@types/react": "^18.0.10",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-redux": "^7.1.18",
-    "jest": "^27.2.0",
-    "jest-css-modules-transform": "^4.2.0",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.3.4"
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
+    "@types/redux-logger": "3.0.9",
+    "redux-logger": "3.0.6",
+    "typescript": "5.1.3"
   }
 }

examples/with-redux/src/app/api/identity-count/route.ts

@@ -0,0 +1,13 @@
+/* Core */
+import { NextResponse } from 'next/server'
+import waait from 'waait'
+
+export async function POST(req: Request, res: Response) {
+  const body = await req.json()
+  const { amount = 1 } = body
+
+  // simulate IO latency
+  await waait(500)
+
+  return NextResponse.json({ data: amount })
+}

examples/with-redux/src/features/counter/Counter.tsx → examples/with-redux/src/app/components/Counter/Counter.tsx

@@ -1,38 +1,39 @@
+'use client'
+
+/* Core */
 import { useState } from 'react'
 
-import { useAppSelector, useAppDispatch } from '../../hooks'
+/* Instruments */
 import {
-  decrement,
-  increment,
-  incrementByAmount,
-  incrementAsync,
-  incrementIfOdd,
+  counterSlice,
+  useSelector,
+  useDispatch,
   selectCount,
-} from './counterSlice'
-import styles from './Counter.module.css'
-
-function Counter() {
-  const dispatch = useAppDispatch()
-  const count = useAppSelector(selectCount)
-  const [incrementAmount, setIncrementAmount] = useState('2')
+  incrementAsync,
+  incrementIfOddAsync,
+} from '@/lib/redux'
+import styles from './counter.module.css'
 
-  const incrementValue = Number(incrementAmount) || 0
+export const Counter = () => {
+  const dispatch = useDispatch()
+  const count = useSelector(selectCount)
+  const [incrementAmount, setIncrementAmount] = useState(2)
 
   return (
     <div>
       <div className={styles.row}>
         <button
           className={styles.button}
           aria-label="Decrement value"
-          onClick={() => dispatch(decrement())}
+          onClick={() => dispatch(counterSlice.actions.decrement())}
         >
           -
         </button>
         <span className={styles.value}>{count}</span>
         <button
           className={styles.button}
           aria-label="Increment value"
-          onClick={() => dispatch(increment())}
+          onClick={() => dispatch(counterSlice.actions.increment())}
         >
           +
         </button>
@@ -42,29 +43,29 @@ function Counter() {
           className={styles.textbox}
           aria-label="Set increment amount"
           value={incrementAmount}
-          onChange={(e) => setIncrementAmount(e.target.value)}
+          onChange={(e) => setIncrementAmount(Number(e.target.value ?? 0))}
         />
         <button
           className={styles.button}
-          onClick={() => dispatch(incrementByAmount(incrementValue))}
+          onClick={() =>
+            dispatch(counterSlice.actions.incrementByAmount(incrementAmount))
+          }
         >
           Add Amount
         </button>
         <button
           className={styles.asyncButton}
-          onClick={() => dispatch(incrementAsync(incrementValue))}
+          onClick={() => dispatch(incrementAsync(incrementAmount))}
         >
           Add Async
         </button>
         <button
           className={styles.button}
-          onClick={() => dispatch(incrementIfOdd(incrementValue))}
+          onClick={() => dispatch(incrementIfOddAsync(incrementAmount))}
         >
           Add If Odd
         </button>
       </div>
     </div>
   )
 }
-
-export default Counter

examples/with-redux/src/app/components/Counter/index.ts

@@ -0,0 +1 @@
+export * from './Counter'

examples/with-redux/src/app/components/Nav.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+/* Core */
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import cx from 'classnames'
+
+/* Instruments */
+import styles from '../styles/layout.module.css'
+
+export const Nav = () => {
+  const pathname = usePathname()
+
+  return (
+    <nav className={styles.nav}>
+      <Link
+        className={cx(styles.link, { [styles.active]: pathname === '/' })}
+        href="/"
+      >
+        Home
+      </Link>
+      <Link
+        className={cx(styles.link, {
+          [styles.active]: pathname === '/verify',
+        })}
+        href="/verify"
+      >
+        Verify
+      </Link>
+    </nav>
+  )
+}

examples/with-redux/src/app/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Counter'
+export * from './Nav'

examples/with-redux/src/app/layout.tsx

@@ -0,0 +1,66 @@
+/* Components */
+import { Providers } from '@/lib/providers'
+import { Nav } from './components'
+
+/* Instruments */
+import styles from './styles/layout.module.css'
+import './styles/globals.css'
+
+export default function RootLayout(props: React.PropsWithChildren) {
+  return (
+    <Providers>
+      <html lang="en">
+        <body>
+          <section className={styles.container}>
+            <Nav />
+
+            <header className={styles.header}>
+              <img src="/logo.svg" className={styles.logo} alt="logo" />
+            </header>
+
+            <main className={styles.main}>{props.children}</main>
+
+            <footer className={styles.footer}>
+              <span>Learn </span>
+              <a
+                className={styles.link}
+                href="https://reactjs.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                React
+              </a>
+              <span>, </span>
+              <a
+                className={styles.link}
+                href="https://redux.js.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Redux
+              </a>
+              <span>, </span>
+              <a
+                className={styles.link}
+                href="https://redux-toolkit.js.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Redux Toolkit
+              </a>
+              ,<span> and </span>
+              <a
+                className={styles.link}
+                href="https://react-redux.js.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                React Redux
+              </a>
+            </footer>
+          </section>
+        </body>
+      </html>
+    </Providers>
+  )
+}

examples/with-redux/src/app/page.tsx

@@ -0,0 +1,10 @@
+/* Components */
+import { Counter } from './components'
+
+export default function IndexPage() {
+  return <Counter />
+}
+
+export const metadata = {
+  title: 'Redux Toolkit',
+}

examples/with-redux/src/app/styles/globals.css

@@ -0,0 +1,16 @@
+html,
+body {
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+  font-family: system-ui, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}

examples/with-redux/src/app/styles/layout.module.css

@@ -0,0 +1,77 @@
+.container {
+  display: grid;
+  grid-template-areas:
+    'nav'
+    'header'
+    'main'
+    'footer';
+  grid-template-rows: auto auto 1fr 36px;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  grid-area: header;
+}
+
+.main {
+  grid-area: main;
+}
+
+.header,
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer {
+  grid-area: footer;
+  justify-self: center;
+}
+
+.nav {
+  grid-area: nav;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px;
+  font-size: calc(10px + 2vmin);
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.link {
+  color: #704cb6;
+}
+
+.link.active {
+  text-decoration: underline;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo {
+    animation: logo-float infinite 3s ease-in-out;
+  }
+}
+
+@keyframes logo-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}