Skip to content

Commit ffa231c

Browse files
HuXn-WebDevHuXn-WebDev
committed
useReducer
1 parent 787747e commit ffa231c

File tree

14 files changed

+4639
-0
lines changed

14 files changed

+4639
-0
lines changed

‎10. useReducer/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎10. useReducer/.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎10. useReducer/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎10. useReducer/app/globals.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎10. useReducer/app/layout.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Metadata } from 'next'
2+
import { Inter } from 'next/font/google'
3+
import './globals.css'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export const metadata: Metadata = {
8+
title: 'Create Next App',
9+
description: 'Generated by create next app',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
)
22+
}

‎10. useReducer/app/page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import Counter from "@/components/Counter";
4+
5+
export default function Home() {
6+
return (
7+
<>
8+
<Counter />
9+
</>
10+
);
11+
}

‎10. useReducer/components/Counter.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useReducer } from "react";
2+
3+
// Define types for state and actions
4+
type State = {
5+
count: number;
6+
};
7+
8+
type Action = { type: "INCREMENT" } | { type: "DECREMENT" };
9+
10+
// Reducer function with types
11+
const reducer = (state: State, action: Action): State => {
12+
switch (action.type) {
13+
case "INCREMENT":
14+
return { count: state.count + 1 };
15+
case "DECREMENT":
16+
return { count: state.count - 1 };
17+
default:
18+
return state;
19+
}
20+
};
21+
22+
const Counter = () => {
23+
const [state, dispatch] = useReducer(reducer, { count: 0 });
24+
25+
return (
26+
<div>
27+
<p>Count: {state.count}</p>
28+
<button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
29+
<button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
30+
</div>
31+
);
32+
};
33+
34+
export default Counter;

‎10. useReducer/data.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"products": [
3+
{
4+
"id": 1,
5+
"title": "iPhone 9",
6+
"description": "An apple mobile which is nothing like apple",
7+
"price": 549,
8+
"discountPercentage": 12.96,
9+
"rating": 4.69,
10+
"stock": 94,
11+
"brand": "Apple",
12+
"category": "smartphones",
13+
"thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
14+
"images": [
15+
"https://i.dummyjson.com/data/products/1/1.jpg",
16+
"https://i.dummyjson.com/data/products/1/2.jpg",
17+
"https://i.dummyjson.com/data/products/1/3.jpg",
18+
"https://i.dummyjson.com/data/products/1/4.jpg",
19+
"https://i.dummyjson.com/data/products/1/thumbnail.jpg"
20+
]
21+
}
22+
],
23+
"total": 100,
24+
"skip": 0,
25+
"limit": 30
26+
}

‎10. useReducer/next.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

0 commit comments

Comments
 (0)