init: create redux toolkit app
This commit is contained in:
commit
e1b74e41b1
100
.eslintrc.cjs
Normal file
100
.eslintrc.cjs
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
/** @type {import("eslint").Linter.Config} */
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
ignorePatterns: ["dist"],
|
||||||
|
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
sourceType: "module",
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
project: true,
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
},
|
||||||
|
|
||||||
|
extends: ["eslint:recommended", "plugin:prettier/recommended"],
|
||||||
|
|
||||||
|
// Rules
|
||||||
|
rules: {
|
||||||
|
"linebreak-style": ["error", "unix"],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_",
|
||||||
|
caughtErrorsIgnorePattern: "^_",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"@typescript-eslint/consistent-type-imports": [2, { fixStyle: "separate-type-imports" }],
|
||||||
|
"@typescript-eslint/no-restricted-imports": [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
paths: [
|
||||||
|
{
|
||||||
|
name: "react-redux",
|
||||||
|
importNames: ["useSelector", "useStore", "useDispatch"],
|
||||||
|
message: "Please use pre-typed versions from `src/app/hooks.ts` instead.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"prettier/prettier": ["error"],
|
||||||
|
},
|
||||||
|
|
||||||
|
overrides: [
|
||||||
|
// React
|
||||||
|
{
|
||||||
|
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||||
|
plugins: ["react", "jsx-a11y"],
|
||||||
|
extends: [
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react/jsx-runtime",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:jsx-a11y/recommended",
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
react: { version: "detect" },
|
||||||
|
formComponents: ["Form"],
|
||||||
|
linkComponents: [
|
||||||
|
{ name: "Link", linkAttribute: "to" },
|
||||||
|
{ name: "NavLink", linkAttribute: "to" },
|
||||||
|
],
|
||||||
|
"import/resolver": { typescript: {} },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Typescript
|
||||||
|
{
|
||||||
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
plugins: ["@typescript-eslint", "import"],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
settings: {
|
||||||
|
"import/internal-regex": "^~/",
|
||||||
|
"import/resolver": {
|
||||||
|
node: { extensions: [".ts", ".tsx"] },
|
||||||
|
typescript: {
|
||||||
|
alwaysTryTypes: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||||
|
"plugin:import/recommended",
|
||||||
|
"plugin:import/typescript",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Node
|
||||||
|
{
|
||||||
|
files: [".eslintrc.{js,cjs}"],
|
||||||
|
env: { node: true },
|
||||||
|
parserOptions: { sourceType: "script" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
4
.husky/pre-commit
Normal file
4
.husky/pre-commit
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
pnpm exec lint-staged
|
||||||
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
/dist/
|
||||||
|
pnpm-lock.yaml
|
||||||
9
.prettierrc.json
Normal file
9
.prettierrc.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"endOfLine": "lf",
|
||||||
|
"printWidth": 120,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": false,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"trailingComma": "all"
|
||||||
|
}
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link href="/vite.svg" rel="icon" type="image/svg+xml" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>WOJ - Online Judge</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="/src/main.tsx" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
package.json
Normal file
50
package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "vite-template-redux",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"start": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
|
||||||
|
"lint:fix": "eslint --cache --cache-location ./node_modules/.cache/eslint --fix .",
|
||||||
|
"type-check": "tsc --noEmit",
|
||||||
|
"prepare": "husky"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@reduxjs/toolkit": "^2.2.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-redux": "^9.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.57",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
"eslint-import-resolver-typescript": "^3.6.1",
|
||||||
|
"eslint-plugin-import": "^2.29.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||||
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"husky": "^9.0.11",
|
||||||
|
"jsdom": "^23.2.0",
|
||||||
|
"lint-staged": "^15.2.2",
|
||||||
|
"prettier": "^3.2.5",
|
||||||
|
"typescript": "^5.3.3",
|
||||||
|
"vite": "^5.1.3",
|
||||||
|
"vite-tsconfig-paths": "^4.3.1"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,jsx,ts,tsx}": [
|
||||||
|
"prettier --write",
|
||||||
|
"eslint --cache --cache-location ./node_modules/.cache/eslint --fix"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
3789
pnpm-lock.yaml
Normal file
3789
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
39
src/App.css
Normal file
39
src/App.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
height: 40vmin;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-float infinite 3s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: calc(10px + 2vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-link {
|
||||||
|
color: rgb(112, 76, 182);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-float {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
48
src/App.tsx
Normal file
48
src/App.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import "./App.css";
|
||||||
|
import { Counter } from "./features/counter/Counter";
|
||||||
|
import { Quotes } from "./features/quotes/Quotes";
|
||||||
|
import logo from "./logo.svg";
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
<Counter />
|
||||||
|
<p>
|
||||||
|
Edit <code>src/App.tsx</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
<Quotes />
|
||||||
|
<span>
|
||||||
|
<span>Learn </span>
|
||||||
|
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
|
||||||
|
React
|
||||||
|
</a>
|
||||||
|
<span>, </span>
|
||||||
|
<a className="App-link" href="https://redux.js.org" target="_blank" rel="noopener noreferrer">
|
||||||
|
Redux
|
||||||
|
</a>
|
||||||
|
<span>, </span>
|
||||||
|
<a
|
||||||
|
className="App-link"
|
||||||
|
href="https://redux-toolkit.js.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Redux Toolkit
|
||||||
|
</a>
|
||||||
|
<span>, </span>
|
||||||
|
<a className="App-link" href="https://react-redux.js.org" target="_blank" rel="noopener noreferrer">
|
||||||
|
React Redux
|
||||||
|
</a>
|
||||||
|
,<span> and </span>
|
||||||
|
<a className="App-link" href="https://reselect.js.org" target="_blank" rel="noopener noreferrer">
|
||||||
|
Reselect
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
5
src/app/createAppSlice.ts
Normal file
5
src/app/createAppSlice.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
export const createAppSlice = buildCreateSlice({
|
||||||
|
creators: { asyncThunk: asyncThunkCreator },
|
||||||
|
});
|
||||||
6
src/app/hooks.ts
Normal file
6
src/app/hooks.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-restricted-imports */
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import type { AppDispatch, RootState } from "./store";
|
||||||
|
|
||||||
|
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
|
||||||
|
export const useAppSelector = useSelector.withTypes<RootState>();
|
||||||
27
src/app/store.ts
Normal file
27
src/app/store.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import type { Action, ThunkAction } from "@reduxjs/toolkit";
|
||||||
|
import { combineSlices, configureStore } from "@reduxjs/toolkit";
|
||||||
|
import { setupListeners } from "@reduxjs/toolkit/query";
|
||||||
|
|
||||||
|
import { counterSlice } from "../features/counter/counterSlice";
|
||||||
|
import { quotesApiSlice } from "../features/quotes/quotesApiSlice";
|
||||||
|
|
||||||
|
const rootReducer = combineSlices(counterSlice, quotesApiSlice);
|
||||||
|
export type RootState = ReturnType<typeof rootReducer>;
|
||||||
|
|
||||||
|
export const makeStore = (preloadedState?: Partial<RootState>) => {
|
||||||
|
const store = configureStore({
|
||||||
|
reducer: rootReducer,
|
||||||
|
middleware: (getDefaultMiddleware) => {
|
||||||
|
return getDefaultMiddleware().concat(quotesApiSlice.middleware);
|
||||||
|
},
|
||||||
|
preloadedState,
|
||||||
|
});
|
||||||
|
setupListeners(store.dispatch);
|
||||||
|
return store;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const store = makeStore();
|
||||||
|
|
||||||
|
export type AppStore = typeof store;
|
||||||
|
export type AppDispatch = AppStore["dispatch"];
|
||||||
|
export type AppThunk<ThunkReturnType = void> = ThunkAction<ThunkReturnType, RootState, unknown, Action>;
|
||||||
79
src/features/counter/Counter.module.css
Normal file
79
src/features/counter/Counter.module.css
Normal file
@ -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;
|
||||||
|
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: rgba(112, 76, 182, 0.1) none;
|
||||||
|
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;
|
||||||
|
}
|
||||||
67
src/features/counter/Counter.tsx
Normal file
67
src/features/counter/Counter.tsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
||||||
|
import styles from "./Counter.module.css";
|
||||||
|
import {
|
||||||
|
decrement,
|
||||||
|
increment,
|
||||||
|
incrementAsync,
|
||||||
|
incrementByAmount,
|
||||||
|
incrementIfOdd,
|
||||||
|
selectCount,
|
||||||
|
selectStatus,
|
||||||
|
} from "./counterSlice";
|
||||||
|
|
||||||
|
export const Counter = () => {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const count = useAppSelector(selectCount);
|
||||||
|
const status = useAppSelector(selectStatus);
|
||||||
|
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 aria-label="Count" 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}
|
||||||
|
type="number"
|
||||||
|
onChange={(e) => {
|
||||||
|
setIncrementAmount(e.target.value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button className={styles.button} onClick={() => dispatch(incrementByAmount(incrementValue))}>
|
||||||
|
Add Amount
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={styles.asyncButton}
|
||||||
|
disabled={status !== "idle"}
|
||||||
|
onClick={() => void dispatch(incrementAsync(incrementValue))}
|
||||||
|
>
|
||||||
|
Add Async
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={styles.button}
|
||||||
|
onClick={() => {
|
||||||
|
dispatch(incrementIfOdd(incrementValue));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add If Odd
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
4
src/features/counter/counterAPI.ts
Normal file
4
src/features/counter/counterAPI.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// A mock function to mimic making an async request for data
|
||||||
|
export const fetchCount = (amount = 1) => {
|
||||||
|
return new Promise<{ data: number }>((resolve) => setTimeout(() => resolve({ data: amount }), 500));
|
||||||
|
};
|
||||||
86
src/features/counter/counterSlice.ts
Normal file
86
src/features/counter/counterSlice.ts
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import type { PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import { createAppSlice } from "../../app/createAppSlice";
|
||||||
|
import type { AppThunk } from "../../app/store";
|
||||||
|
import { fetchCount } from "./counterAPI";
|
||||||
|
|
||||||
|
export interface CounterSliceState {
|
||||||
|
value: number;
|
||||||
|
status: "idle" | "loading" | "failed";
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: CounterSliceState = {
|
||||||
|
value: 0,
|
||||||
|
status: "idle",
|
||||||
|
};
|
||||||
|
|
||||||
|
// If you are not using async thunks you can use the standalone `createSlice`.
|
||||||
|
export const counterSlice = createAppSlice({
|
||||||
|
name: "counter",
|
||||||
|
// `createSlice` will infer the state type from the `initialState` argument
|
||||||
|
initialState,
|
||||||
|
// The `reducers` field lets us define reducers and generate associated actions
|
||||||
|
reducers: (create) => ({
|
||||||
|
increment: create.reducer((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: create.reducer((state) => {
|
||||||
|
state.value -= 1;
|
||||||
|
}),
|
||||||
|
// Use the `PayloadAction` type to declare the contents of `action.payload`
|
||||||
|
incrementByAmount: create.reducer((state, action: PayloadAction<number>) => {
|
||||||
|
state.value += action.payload;
|
||||||
|
}),
|
||||||
|
// 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.
|
||||||
|
incrementAsync: create.asyncThunk(
|
||||||
|
async (amount: number) => {
|
||||||
|
const response = await fetchCount(amount);
|
||||||
|
// The value we return becomes the `fulfilled` action payload
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pending: (state) => {
|
||||||
|
state.status = "loading";
|
||||||
|
},
|
||||||
|
fulfilled: (state, action) => {
|
||||||
|
state.status = "idle";
|
||||||
|
state.value += action.payload;
|
||||||
|
},
|
||||||
|
rejected: (state) => {
|
||||||
|
state.status = "failed";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
// You can define your selectors here. These selectors receive the slice
|
||||||
|
// state as their first argument.
|
||||||
|
selectors: {
|
||||||
|
selectCount: (counter) => counter.value,
|
||||||
|
selectStatus: (counter) => counter.status,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Action creators are generated for each case reducer function.
|
||||||
|
export const { decrement, increment, incrementByAmount, incrementAsync } = counterSlice.actions;
|
||||||
|
|
||||||
|
// Selectors returned by `slice.selectors` take the root state as their first argument.
|
||||||
|
export const { selectCount, selectStatus } = counterSlice.selectors;
|
||||||
|
|
||||||
|
// 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 || currentValue % 2 === -1) {
|
||||||
|
dispatch(incrementByAmount(amount));
|
||||||
|
}
|
||||||
|
};
|
||||||
18
src/features/quotes/Quotes.module.css
Normal file
18
src/features/quotes/Quotes.module.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.select {
|
||||||
|
font-size: 25px;
|
||||||
|
padding: 2px 5px;
|
||||||
|
size: 50px;
|
||||||
|
outline: none;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
color: rgb(112, 76, 182);
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgba(112, 76, 182, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
58
src/features/quotes/Quotes.tsx
Normal file
58
src/features/quotes/Quotes.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import styles from "./Quotes.module.css";
|
||||||
|
import { useGetQuotesQuery } from "./quotesApiSlice";
|
||||||
|
|
||||||
|
const options = [5, 10, 20, 30];
|
||||||
|
|
||||||
|
export const Quotes = () => {
|
||||||
|
const [numberOfQuotes, setNumberOfQuotes] = useState(10);
|
||||||
|
// Using a query hook automatically fetches data and returns query values
|
||||||
|
const { data, isError, isLoading, isSuccess } = useGetQuotesQuery(numberOfQuotes);
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>There was an error!!!</h1>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Loading...</h1>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSuccess) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h3>Select the Quantity of Quotes to Fetch:</h3>
|
||||||
|
<select
|
||||||
|
className={styles.select}
|
||||||
|
value={numberOfQuotes}
|
||||||
|
onChange={(e) => {
|
||||||
|
setNumberOfQuotes(Number(e.target.value));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{options.map((option) => (
|
||||||
|
<option key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{data.quotes.map(({ author, quote, id }) => (
|
||||||
|
<blockquote key={id}>
|
||||||
|
“{quote}”
|
||||||
|
<footer>
|
||||||
|
<cite>{author}</cite>
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
38
src/features/quotes/quotesApiSlice.ts
Normal file
38
src/features/quotes/quotesApiSlice.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
// Need to use the React-specific entry point to import `createApi`
|
||||||
|
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
|
||||||
|
|
||||||
|
interface Quote {
|
||||||
|
id: number;
|
||||||
|
quote: string;
|
||||||
|
author: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuotesApiResponse {
|
||||||
|
quotes: Quote[];
|
||||||
|
total: number;
|
||||||
|
skip: number;
|
||||||
|
limit: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Define a service using a base URL and expected endpoints
|
||||||
|
export const quotesApiSlice = createApi({
|
||||||
|
baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/quotes" }),
|
||||||
|
reducerPath: "quotesApi",
|
||||||
|
// Tag types are used for caching and invalidation.
|
||||||
|
tagTypes: ["Quotes"],
|
||||||
|
endpoints: (build) => ({
|
||||||
|
// Supply generics for the return type (in this case `QuotesApiResponse`)
|
||||||
|
// and the expected query argument. If there is no argument, use `void`
|
||||||
|
// for the argument type instead.
|
||||||
|
getQuotes: build.query<QuotesApiResponse, number>({
|
||||||
|
query: (limit = 10) => `?limit=${limit}`,
|
||||||
|
// `providesTags` determines which 'tag' is attached to the
|
||||||
|
// cached data returned by the query.
|
||||||
|
providesTags: (result, error, id) => [{ type: "Quotes", id }],
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hooks are auto-generated by RTK-Query
|
||||||
|
// Same as `quotesApiSlice.endpoints.getQuotes.useQuery`
|
||||||
|
export const { useGetQuotesQuery } = quotesApiSlice;
|
||||||
11
src/index.css
Normal file
11
src/index.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||||
|
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
|
}
|
||||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
25
src/main.tsx
Normal file
25
src/main.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
|
||||||
|
import App from "./App";
|
||||||
|
import { store } from "./app/store";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const container = document.getElementById("root");
|
||||||
|
|
||||||
|
if (container) {
|
||||||
|
const root = createRoot(container);
|
||||||
|
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<Provider store={store}>
|
||||||
|
<App />
|
||||||
|
</Provider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
"Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
23
tsconfig.json
Normal file
23
tsconfig.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
|
"allowJs": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": false,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
9
tsconfig.node.json
Normal file
9
tsconfig.node.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
13
vite.config.ts
Normal file
13
vite.config.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import packageJson from "./package.json";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tsconfigPaths()],
|
||||||
|
build: { sourcemap: true },
|
||||||
|
define: {
|
||||||
|
"import.meta.env.PACKAGE_VERSION": JSON.stringify(packageJson.version),
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user