Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8976372

Browse files
author
Wcoder547
committedAug 4, 2024
redux-toolkit done fully
1 parent 49890d9 commit 8976372

File tree

20 files changed

+5674
-0
lines changed

20 files changed

+5674
-0
lines changed
 

‎redux-toolkit/.eslintrc.cjs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react/jsx-no-target-blank': 'off',
16+
'react-refresh/only-export-components': [
17+
'warn',
18+
{ allowConstantExport: true },
19+
],
20+
},
21+
}

‎redux-toolkit/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎redux-toolkit/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# React + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

‎redux-toolkit/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vite + React</title>
9+
</head>
10+
11+
<body style="background-color: gray;">
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.jsx"></script>
14+
</body>
15+
16+
</html>

‎redux-toolkit/package-lock.json

Lines changed: 5396 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎redux-toolkit/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "redux-toolkit",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@reduxjs/toolkit": "^2.2.7",
14+
"react": "^18.3.1",
15+
"react-dom": "^18.3.1",
16+
"react-redux": "^9.1.2"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^18.3.3",
20+
"@types/react-dom": "^18.3.0",
21+
"@vitejs/plugin-react": "^4.3.1",
22+
"autoprefixer": "^10.4.20",
23+
"eslint": "^8.57.0",
24+
"eslint-plugin-react": "^7.34.3",
25+
"eslint-plugin-react-hooks": "^4.6.2",
26+
"eslint-plugin-react-refresh": "^0.4.7",
27+
"postcss": "^8.4.40",
28+
"tailwindcss": "^3.4.7",
29+
"vite": "^5.3.4"
30+
}
31+
}

‎redux-toolkit/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎redux-toolkit/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎redux-toolkit/src/App.css

Whitespace-only changes.

‎redux-toolkit/src/App.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
import './App.css'
3+
import AddTodo from './components/AddTodo'
4+
import Todos from './components/Todos'
5+
6+
function App() {
7+
8+
9+
return (
10+
<>
11+
12+
<AddTodo/>
13+
<Todos/>
14+
</>
15+
)
16+
}
17+
18+
export default App

‎redux-toolkit/src/app/store.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configureStore } from "@reduxjs/toolkit";
2+
import todoReducer from "../features/todo/todoSlice";
3+
const store = configureStore({
4+
reducer: todoReducer,
5+
});
6+
7+
export { store };

‎redux-toolkit/src/assets/react.svg

Lines changed: 1 addition & 0 deletions
Loading

‎redux-toolkit/src/components/AddTodo.jsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from "react"
2+
import { useDispatch } from "react-redux"
3+
import { addTodo } from "../features/todo/todoSlice"
4+
5+
6+
const AddTodo = () => {
7+
const[input,setInput]=useState("")
8+
const dispatch = useDispatch()
9+
10+
const addTodoHandler =(e)=>{
11+
e.preventDefault()
12+
// console.log(input)
13+
if (input.trim()) {
14+
dispatch(addTodo(input))
15+
setInput('')
16+
}
17+
}
18+
return (
19+
<form onSubmit={addTodoHandler} className="space-x-3 mt-12 flex justify-center">
20+
<input
21+
type="text"
22+
className="bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out "
23+
placeholder="Enter a Todo..."
24+
id="todoText"
25+
value={input}
26+
onChange={(e) => setInput(e.target.value)}
27+
/>
28+
<button
29+
type="submit"
30+
className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
31+
>
32+
Add Todo
33+
</button>
34+
</form>
35+
)
36+
}
37+
38+
export default AddTodo

‎redux-toolkit/src/components/Todos.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { useSelector,useDispatch } from "react-redux"
2+
import { removeTodo } from "../features/todo/todoSlice"
3+
4+
const Todos = () => {
5+
const todos = useSelector((state) => state?.todos)
6+
if(!todos){
7+
console.log("todos not defined")
8+
}
9+
const dispatch = useDispatch()
10+
console.log(todos)
11+
return (
12+
<>
13+
14+
<ul className="list-none flex items-center flex-col">
15+
{todos.map((todo) => (
16+
<li
17+
className="mt-5 flex justify-between items-center bg-zinc-800 px-4 py-2 rounded w-1/2"
18+
key={todo.id}
19+
>
20+
<div className='text-white'>{todo.text}</div>
21+
<button
22+
onClick={()=>dispatch(removeTodo(todo.id))}
23+
className="text-white bg-red-500 border-0 py-1 px-4 focus:outline-none hover:bg-red-600 rounded text-md"
24+
>
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
fill="none"
28+
viewBox="0 0 24 24"
29+
strokeWidth={1.5}
30+
stroke="currentColor"
31+
className="w-6 h-6"
32+
>
33+
<path
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
37+
/>
38+
</svg>
39+
</button>
40+
</li>
41+
))}
42+
</ul>
43+
</>
44+
)
45+
}
46+
47+
export default Todos

‎redux-toolkit/src/features/todo/todoSlice.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createSlice, nanoid } from "@reduxjs/toolkit";
2+
3+
const initialState = {
4+
todos: [
5+
{
6+
id: 1,
7+
text: "yh aisa dewana he jo ishq me jan bhi deta he use khna bhi hoga chup rhna bhi hoga use dard e judai yha sehna bhi hoga",
8+
},
9+
],
10+
};
11+
12+
const todoSlice = createSlice({
13+
name: "todo",
14+
initialState,
15+
reducers: {
16+
addTodo: (state, action) => {
17+
const todo = {
18+
id: nanoid(),
19+
text: action.payload,
20+
};
21+
state.todos.push(todo);
22+
},
23+
removeTodo: (state, action) => {
24+
state.todos = state.todos.filter((todo) => todo.id !== action.payload);
25+
},
26+
},
27+
});
28+
29+
export const { addTodo, removeTodo } = todoSlice.actions;
30+
export default todoSlice.reducer;

‎redux-toolkit/src/index.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;

‎redux-toolkit/src/main.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App.jsx'
4+
import './index.css'
5+
import { Provider } from 'react-redux'
6+
import { store } from './app/store.js'
7+
8+
ReactDOM.createRoot(document.getElementById('root')).render(
9+
<Provider store={store}>
10+
<App />
11+
</Provider>,
12+
)

‎redux-toolkit/src/redux-toolkit.png

224 KB
Loading

‎redux-toolkit/tailwind.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
};

‎redux-toolkit/vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

0 commit comments

Comments
 (0)
Please sign in to comment.