Initial commit from Create Next App

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -0,0 +1,25 @@
+# Redux Toolkit TypeScript Example
+
+This example shows how to integrate Next.js with [Redux Toolkit](https://redux-toolkit.js.org).
+
+The **Redux Toolkit** is a standardized way to write Redux logic (create actions and reducers, setup the store with some default middlewares like redux devtools extension). This example demonstrates each of these features with Next.js
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux&project-name=with-redux&repository-name=with-redux)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-redux with-redux-app
+# or
+yarn create next-app --example with-redux with-redux-app
+# or
+pnpm create next-app --example with-redux with-redux-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

jest.config.ts

@@ -0,0 +1,17 @@
+import type { InitialOptionsTsJest } from 'ts-jest/dist/types'
+
+const config: InitialOptionsTsJest = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  transform: {
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
+  },
+  testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json',
+    },
+  },
+}
+
+export default config

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.3.6",
+    "next": "latest",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.0.0",
+    "@testing-library/react": "^12.1.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"
+  }
+}

public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="#764ABC"><path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/><path d="M83.2 53c-7.6-8.9-18.8-13.8-31.6-13.8H50c-.9-1.8-2.8-3-4.9-3h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 3 2.6 5.4 5.6 5.4h.2c2.2-.1 4.1-1.5 4.9-3.4H52c7.6 0 14.8 2.2 21.3 6.5 5 3.3 8.6 7.6 10.6 12.8 1.7 4.2 1.6 8.3-.2 11.8-2.8 5.3-7.5 8.2-13.7 8.2-4 0-7.8-1.2-9.8-2.1-1.1 1-3.1 2.6-4.5 3.6 4.3 2 8.7 3.1 12.9 3.1 9.6 0 16.7-5.3 19.4-10.6 2.9-5.8 2.7-15.8-4.8-24.3z"/><path d="M32.4 67.1c.1 3 2.6 5.4 5.6 5.4h.2c3.1-.1 5.5-2.7 5.4-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-.2 0-.5 0-.7.1-4.1-6.8-5.8-14.2-5.2-22.2.4-6 2.4-11.2 5.9-15.5 2.9-3.7 8.5-5.5 12.3-5.6 10.6-.2 15.1 13 15.4 18.3 1.3.3 3.5 1 5 1.5-1.2-16.2-11.2-24.6-20.8-24.6-9 0-17.3 6.5-20.6 16.1-4.6 12.8-1.6 25.1 4 34.8-.5.7-.8 1.8-.7 2.9z"/></g></svg>

setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom'
+import { loadEnvConfig } from '@next/env'
+
+loadEnvConfig(__dirname, true, { info: () => null, error: console.error })

src/app/hooks.ts

@@ -0,0 +1,48 @@
+import type { ChangeEvent } from 'react'
+import { useEffect, useRef } from 'react'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+
+import type { AppDispatch, AppState } from './store'
+
+export const useForm =
+  <TContent>(defaultValues: TContent) =>
+  (handler: (content: TContent) => void) =>
+  async (event: ChangeEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    event.persist()
+
+    const form = event.target as HTMLFormElement
+    const elements = Array.from(form.elements) as HTMLInputElement[]
+    const data = elements
+      .filter((element) => element.hasAttribute('name'))
+      .reduce(
+        (object, element) => ({
+          ...object,
+          [`${element.getAttribute('name')}`]: element.value,
+        }),
+        defaultValues
+      )
+    await handler(data)
+    form.reset()
+  }
+
+// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+export const useInterval = (callback: Function, delay: number) => {
+  const savedCallback = useRef<Function>()
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+  useEffect(() => {
+    const handler = (...args: any) => savedCallback.current?.(...args)
+
+    if (delay !== null) {
+      const id = setInterval(handler, delay)
+      return () => clearInterval(id)
+    }
+  }, [delay])
+}
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+
+export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector

src/app/store.ts

@@ -0,0 +1,24 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
+
+import counterReducer from '../features/counter/counterSlice'
+
+export function makeStore() {
+  return configureStore({
+    reducer: { counter: counterReducer },
+  })
+}
+
+const store = makeStore()
+
+export type AppState = ReturnType<typeof store.getState>
+
+export type AppDispatch = typeof store.dispatch
+
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  AppState,
+  unknown,
+  Action<string>
+>
+
+export default store

src/features/counter/Counter.module.css

@@ -0,0 +1,79 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.row > button {
+  margin-left: 4px;
+  margin-right: 8px;
+}
+
+.row:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.value {
+  font-size: 78px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 2px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.button {
+  appearance: none;
+  background: none;
+  font-size: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+  outline: none;
+  border: 2px solid transparent;
+  color: rgb(112, 76, 182);
+  padding-bottom: 4px;
+  cursor: pointer;
+  background-color: rgba(112, 76, 182, 0.1);
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.textbox {
+  font-size: 32px;
+  padding: 2px;
+  width: 64px;
+  text-align: center;
+  margin-right: 4px;
+}
+
+.button:hover,
+.button:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.button:active {
+  background-color: rgba(112, 76, 182, 0.2);
+}
+
+.asyncButton {
+  composes: button;
+  position: relative;
+}
+
+.asyncButton:after {
+  content: '';
+  background-color: rgba(112, 76, 182, 0.15);
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: width 1s linear, opacity 0.5s ease 1s;
+}
+
+.asyncButton:active:after {
+  width: 0%;
+  opacity: 1;
+  transition: 0s;
+}

src/features/counter/Counter.spec.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from '@testing-library/react'
+import user from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+
+jest.mock('./counterAPI', () => ({
+  fetchCount: (amount: number) =>
+    new Promise<{ data: number }>((resolve) =>
+      setTimeout(() => resolve({ data: amount }), 500)
+    ),
+}))
+
+import { makeStore } from '../../app/store'
+import Counter from './Counter'
+
+describe('<Counter />', () => {
+  it('renders the component', () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+  })
+
+  it('decrements the value', () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    user.click(screen.getByRole('button', { name: /decrement value/i }))
+
+    expect(screen.getByText('-1')).toBeInTheDocument()
+  })
+
+  it('increments the value', () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    user.click(screen.getByRole('button', { name: /increment value/i }))
+
+    expect(screen.getByText('1')).toBeInTheDocument()
+  })
+
+  it('increments by amount', () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}5')
+    user.click(screen.getByRole('button', { name: /add amount/i }))
+
+    expect(screen.getByText('5')).toBeInTheDocument()
+  })
+
+  it('increments async', async () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}3')
+    user.click(screen.getByRole('button', { name: /add async/i }))
+
+    await expect(screen.findByText('3')).resolves.toBeInTheDocument()
+  })
+
+  it('increments if amount is odd', async () => {
+    const store = makeStore()
+
+    render(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    user.click(screen.getByRole('button', { name: /add if odd/i }))
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+
+    user.click(screen.getByRole('button', { name: /increment value/i }))
+    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}8')
+    user.click(screen.getByRole('button', { name: /add if odd/i }))
+
+    await expect(screen.findByText('9')).resolves.toBeInTheDocument()
+  })
+})

src/features/counter/Counter.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+import { useAppSelector, useAppDispatch } from '../../app/hooks'
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  incrementIfOdd,
+  selectCount,
+} from './counterSlice'
+import styles from './Counter.module.css'
+
+function Counter() {
+  const dispatch = useAppDispatch()
+  const count = useAppSelector(selectCount)
+  const [incrementAmount, setIncrementAmount] = useState('2')
+
+  const incrementValue = Number(incrementAmount) || 0
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+        <span className={styles.value}>{count}</span>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+      </div>
+      <div className={styles.row}>
+        <input
+          className={styles.textbox}
+          aria-label="Set increment amount"
+          value={incrementAmount}
+          onChange={(e) => setIncrementAmount(e.target.value)}
+        />
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementByAmount(incrementValue))}
+        >
+          Add Amount
+        </button>
+        <button
+          className={styles.asyncButton}
+          onClick={() => dispatch(incrementAsync(incrementValue))}
+        >
+          Add Async
+        </button>
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementIfOdd(incrementValue))}
+        >
+          Add If Odd
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Counter

src/features/counter/counterAPI.ts

@@ -0,0 +1,12 @@
+export async function fetchCount(amount = 1): Promise<{ data: number }> {
+  const response = await fetch('/api/counter', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ amount }),
+  })
+  const result = await response.json()
+
+  return result
+}

src/features/counter/counterSlice.ts

@@ -0,0 +1,82 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import type { AppState, AppThunk } from '../../app/store'
+import { fetchCount } from './counterAPI'
+
+export interface CounterState {
+  value: number
+  status: 'idle' | 'loading' | 'failed'
+}
+
+const initialState: CounterState = {
+  value: 0,
+  status: 'idle',
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+export const incrementAsync = createAsyncThunk(
+  'counter/fetchCount',
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  }
+)
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+  // The `extraReducers` field lets the slice handle actions defined elsewhere,
+  // including actions generated by createAsyncThunk or in other slices.
+  extraReducers: (builder) => {
+    builder
+      .addCase(incrementAsync.pending, (state) => {
+        state.status = 'loading'
+      })
+      .addCase(incrementAsync.fulfilled, (state, action) => {
+        state.status = 'idle'
+        state.value += action.payload
+      })
+  },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: AppState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+  (amount: number): AppThunk =>
+  (dispatch, getState) => {
+    const currentValue = selectCount(getState())
+    if (currentValue % 2 === 1) {
+      dispatch(incrementByAmount(amount))
+    }
+  }
+
+export default counterSlice.reducer

src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import '../styles/globals.css'
+
+import { Provider } from 'react-redux'
+import type { AppProps } from 'next/app'
+
+import store from '../app/store'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <Provider store={store}>
+      <Component {...pageProps} />
+    </Provider>
+  )
+}

src/pages/api/counter.ts

@@ -0,0 +1,12 @@
+import type { NextApiHandler } from 'next'
+
+const countHandler: NextApiHandler = async (request, response) => {
+  const { amount = 1 } = request.body
+
+  // simulate IO latency
+  await new Promise((resolve) => setTimeout(resolve, 500))
+
+  response.json({ data: amount })
+}
+
+export default countHandler

src/pages/index.tsx

@@ -0,0 +1,63 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+
+import Counter from '../features/counter/Counter'
+import styles from '../styles/Home.module.css'
+
+const IndexPage: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Redux Toolkit</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <header className={styles.header}>
+        <img src="/logo.svg" className={styles.logo} alt="logo" />
+        <Counter />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <span>
+          <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>
+        </span>
+      </header>
+    </div>
+  )
+}
+
+export default IndexPage

src/styles/Home.module.css

@@ -0,0 +1,39 @@
+.container {
+  text-align: center;
+}
+
+.logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.link {
+  color: rgb(112, 76, 182);
+}
+
+@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);
+  }
+}

src/styles/globals.css

@@ -0,0 +1,16 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}