├── 01_redux-intro-and-reducer-pattern
├── index.html
├── package-lock.json
├── package.json
└── script.js
├── 02_redux-devtools
├── index.html
├── package-lock.json
├── package.json
└── script.js
├── 03_make-your-own-redux
├── index.html
├── my-redux.js
├── package-lock.json
├── package.json
└── script.js
├── 04_manage-complex-state-using-redux
├── index.html
├── package-lock.json
├── package.json
├── productsList.js
└── script.js
├── 05_creating-multiple-reducers
├── cartReducer.js
├── index.html
├── package-lock.json
├── package.json
├── productsList.js
├── productsReducer.js
├── script.js
└── wishListReducer.js
├── 06_make-your-own-combineReducer-function
├── cartReducer.js
├── index.html
├── package-lock.json
├── package.json
├── productsList.js
├── productsReducer.js
├── script.js
└── wishListReducer.js
├── 07_action-creators-in-redux
├── cartReducer.js
├── index.html
├── package-lock.json
├── package.json
├── productsList.js
├── productsReducer.js
├── script.js
└── wishListReducer.js
├── 08_connect-redux-with-react
├── App.css
├── App.js
├── components
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── required-files
│ ├── App.css
│ └── Product.js
└── store
│ ├── cartReducer.js
│ ├── index.js
│ ├── productsList.js
│ ├── productsReducer.js
│ └── wishListReducer.js
├── 09_make-shopping-cart
├── final-code
│ ├── App.css
│ ├── App.js
│ ├── assets
│ │ └── cart-icon.svg
│ ├── components
│ │ ├── CartItem.js
│ │ ├── Header.js
│ │ └── Product.js
│ ├── index.html
│ ├── main.js
│ ├── package-lock.json
│ ├── package.json
│ ├── pages
│ │ ├── Cart.js
│ │ └── Home.js
│ └── store
│ │ ├── cartReducer.js
│ │ ├── index.js
│ │ ├── productsList.js
│ │ ├── productsReducer.js
│ │ └── wishListReducer.js
└── starter-code
│ ├── App.css
│ ├── App.js
│ ├── assets
│ └── cart-icon.svg
│ ├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
│ ├── index.html
│ ├── main.js
│ ├── package-lock.json
│ ├── package.json
│ ├── pages
│ ├── Cart.js
│ └── Home.js
│ └── store
│ ├── cartReducer.js
│ ├── index.js
│ ├── productsList.js
│ ├── productsReducer.js
│ └── wishListReducer.js
├── 10_make-your-own-react-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
└── store
│ ├── cartReducer.js
│ ├── index.js
│ ├── productsList.js
│ ├── productsReducer.js
│ └── wishListReducer.js
├── 11_what-are-slices-in-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
└── store
│ ├── index.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 12_immerJS-in-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
└── store
│ ├── index.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 13_redux-toolkit
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
└── store
│ ├── index.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 14_make-your-own-redux-toolkit
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 15_middlewares-in-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 16_making-api-calls-in-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 17_selectors-in-redux
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 18_custom-api-middleware
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ ├── api.js
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 19_redux-thunk
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ ├── api.js
│ ├── func.js
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
├── 20_createAsyncThunk
├── App.css
├── App.js
├── assets
│ └── cart-icon.svg
├── components
│ ├── CartItem.js
│ ├── Header.js
│ └── Product.js
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── pages
│ ├── Cart.js
│ └── Home.js
├── react-redux.js
├── redux-toolkit.js
└── store
│ ├── index.js
│ ├── middleware
│ ├── api.js
│ ├── func.js
│ └── logger.js
│ ├── productsList.js
│ └── slices
│ ├── cartSlice.js
│ ├── productsSlice.js
│ └── wishListSlice.js
└── 21_rtk-query
├── final-code
├── README.md
├── db.json
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── vite.svg
├── src
│ ├── App.jsx
│ ├── Home.jsx
│ ├── TaskItem.jsx
│ ├── apiSlice.js
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.jsx
│ └── store.js
├── tailwind.config.js
└── vite.config.js
└── starter-code
├── README.md
├── db.json
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── App.jsx
├── Home.jsx
├── TaskItem.jsx
├── assets
│ └── react.svg
├── index.css
└── main.jsx
├── tailwind.config.js
└── vite.config.js
/01_redux-intro-and-reducer-pattern/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 | Post:
15 |
16 |
17 |
--------------------------------------------------------------------------------
/01_redux-intro-and-reducer-pattern/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/01_redux-intro-and-reducer-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/01_redux-intro-and-reducer-pattern/script.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux'
2 |
3 | const initialState = {
4 | post: 0,
5 | name: 'Anurag Singh',
6 | age: 26,
7 | }
8 |
9 | const INCREMENT = 'post/increment'
10 | const DECREMENT = 'post/decrement'
11 | const INCREASE_BY = 'post/increaseBy'
12 | const DECREASE_BY = 'post/decreaseBy'
13 |
14 | function reducer(state = initialState, action) {
15 | switch (action.type) {
16 | case INCREMENT:
17 | return { ...state, post: state.post + 1 }
18 | case DECREMENT:
19 | return { ...state, post: state.post - 1 }
20 | case INCREASE_BY:
21 | return { ...state, post: state.post + action.payload }
22 | case DECREASE_BY:
23 | return { ...state, post: state.post - action.payload }
24 | default:
25 | return state
26 | }
27 | }
28 |
29 | const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__?.())
30 |
31 | console.log(store)
32 |
33 | store.subscribe(() => {
34 | console.log(store.getState())
35 | })
36 |
37 |
38 | store.dispatch({ type: INCREMENT })
39 | store.dispatch({ type: DECREMENT })
40 | store.dispatch({ type: INCREASE_BY, payload: 15 })
41 | store.dispatch({ type: DECREASE_BY, payload: 5 })
--------------------------------------------------------------------------------
/02_redux-devtools/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 | Post:
15 |
16 |
17 |
--------------------------------------------------------------------------------
/02_redux-devtools/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/02_redux-devtools/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/02_redux-devtools/script.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux'
2 | const postCountElement = document.querySelector('.post-count')
3 |
4 | const initialState = {
5 | post: 0,
6 | name: 'Anurag Singh',
7 | age: 26,
8 | }
9 |
10 | const INCREMENT = 'post/increment'
11 | const DECREMENT = 'post/decrement'
12 | const INCREASE_BY = 'post/increaseBy'
13 | const DECREASE_BY = 'post/decreaseBy'
14 |
15 | function reducer(state = initialState, action) {
16 | switch (action.type) {
17 | case INCREMENT:
18 | return { ...state, post: state.post + 1 }
19 | case DECREMENT:
20 | return { ...state, post: state.post - 1 }
21 | case INCREASE_BY:
22 | return { ...state, post: state.post + action.payload }
23 | case DECREASE_BY:
24 | return { ...state, post: state.post - action.payload }
25 | default:
26 | return state
27 | }
28 | }
29 |
30 | const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__?.())
31 |
32 | console.log(store)
33 |
34 | const unsubscribe = store.subscribe(() => {
35 | console.log(store.getState())
36 | postCountElement.innerText = store.getState().post
37 | })
38 |
39 | postCountElement.innerText = store.getState().post
40 |
41 | store.dispatch({ type: INCREMENT })
42 | store.dispatch({ type: DECREMENT })
43 | store.dispatch({ type: INCREASE_BY, payload: 15 })
44 | store.dispatch({ type: DECREASE_BY, payload: 5 })
45 |
46 | // unsubscribe()
47 |
48 | postCountElement.addEventListener('click', () => {
49 | store.dispatch({ type: INCREMENT })
50 | })
51 |
--------------------------------------------------------------------------------
/03_make-your-own-redux/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 | Post:
15 |
16 |
17 |
--------------------------------------------------------------------------------
/03_make-your-own-redux/my-redux.js:
--------------------------------------------------------------------------------
1 | export function myCreateStore(reducer) {
2 | let state
3 | const listeners = []
4 | const store = {
5 | getState() {
6 | return state
7 | },
8 | dispatch(action) {
9 | state = reducer(state, action)
10 | listeners.forEach((listener) => {
11 | listener()
12 | })
13 | },
14 | subscribe(listener) {
15 | listeners.push(listener)
16 | return function () {
17 | const listenerIndex = listeners.findIndex(
18 | (registeredListeners) => registeredListeners === listener
19 | )
20 | listeners.splice(listenerIndex, 1)
21 | }
22 | },
23 | }
24 |
25 | store.dispatch({ type: '@@INIT' })
26 | return store
27 | }
28 |
--------------------------------------------------------------------------------
/03_make-your-own-redux/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/03_make-your-own-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/04_manage-complex-state-using-redux/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 |
15 |
--------------------------------------------------------------------------------
/04_manage-complex-state-using-redux/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/04_manage-complex-state-using-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/cartReducer.js:
--------------------------------------------------------------------------------
1 | export const CART_ADD_ITEM = 'cart/addItem'
2 | export const CART_REMOVE_ITEM = 'cart/removeItem'
3 | export const CART_ITEM_INCREASE_QUANTITY = 'cart/increaseItemQuantity'
4 | export const CART_ITEM_DECREASE_QUANTITY = 'cart/decreaseItemQuantity'
5 |
6 | export default function cartReducer(state = [], action) {
7 | switch (action.type) {
8 | case CART_ADD_ITEM:
9 | return [...state, action.payload]
10 | case CART_REMOVE_ITEM:
11 | return state.filter(
12 | (cartItem) => cartItem.productId !== action.payload.productId
13 | )
14 | case CART_ITEM_INCREASE_QUANTITY:
15 | return state.map((cartItem) => {
16 | if (cartItem.productId === action.payload.productId) {
17 | return { ...cartItem, quantity: cartItem.quantity + 1 }
18 | }
19 | return cartItem
20 | })
21 |
22 | case CART_ITEM_DECREASE_QUANTITY:
23 | return state
24 | .map((cartItem) => {
25 | if (cartItem.productId === action.payload.productId) {
26 | return { ...cartItem, quantity: cartItem.quantity - 1 }
27 | }
28 | return cartItem
29 | })
30 | .filter((cartItem) => cartItem.quantity > 0)
31 | default:
32 | return state
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 |
15 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/productsReducer.js:
--------------------------------------------------------------------------------
1 | import { productsList } from './productsList'
2 |
3 | export default function productsReducer(state = productsList) {
4 | return state
5 | }
6 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/script.js:
--------------------------------------------------------------------------------
1 | import { combineReducers, createStore } from 'redux'
2 | import productsReducer from './productsReducer'
3 | import cartReducer, {
4 | CART_ADD_ITEM,
5 | CART_ITEM_DECREASE_QUANTITY,
6 | CART_ITEM_INCREASE_QUANTITY,
7 | } from './cartReducer'
8 | import wishListReducer, {
9 | WISHLIST_ADD_ITEM,
10 | WISHLIST_REMOVE_ITEM,
11 | } from './wishListReducer'
12 |
13 | const reducer = combineReducers({
14 | products: productsReducer,
15 | cartItems: cartReducer,
16 | wishList: wishListReducer,
17 | })
18 |
19 | const store = createStore(
20 | reducer,
21 | window.__REDUX_DEVTOOLS_EXTENSION__?.()
22 | )
23 |
24 | console.log(store)
25 |
26 | store.dispatch({ type: CART_ADD_ITEM, payload: { productId: 1, quantity: 1 } })
27 | store.dispatch({ type: CART_ADD_ITEM, payload: { productId: 12, quantity: 1 } })
28 | store.dispatch({
29 | type: CART_ITEM_INCREASE_QUANTITY,
30 | payload: { productId: 12 },
31 | })
32 | store.dispatch({
33 | type: CART_ITEM_DECREASE_QUANTITY,
34 | payload: { productId: 12 },
35 | })
36 |
37 | store.dispatch({
38 | type: CART_ITEM_DECREASE_QUANTITY,
39 | payload: { productId: 12 },
40 | })
41 |
42 | store.dispatch({ type: WISHLIST_ADD_ITEM, payload: { productId: 18 } })
43 | store.dispatch({ type: WISHLIST_ADD_ITEM, payload: { productId: 11 } })
44 | store.dispatch({ type: WISHLIST_REMOVE_ITEM, payload: { productId: 11 } })
45 | store.dispatch({ type: WISHLIST_REMOVE_ITEM, payload: { productId: 18 } })
46 | console.log(store.getState())
47 |
--------------------------------------------------------------------------------
/05_creating-multiple-reducers/wishListReducer.js:
--------------------------------------------------------------------------------
1 | export const WISHLIST_ADD_ITEM = 'wishList/addItem'
2 | export const WISHLIST_REMOVE_ITEM = 'wishList/removeItem'
3 |
4 | export default function wishListReducer(state = [], action) {
5 | switch (action.type) {
6 | case WISHLIST_ADD_ITEM:
7 | return [...state, action.payload]
8 |
9 | case WISHLIST_REMOVE_ITEM:
10 | return state.filter(
11 | (wishListItem) => wishListItem.productId !== action.payload.productId
12 | )
13 | default:
14 | return state
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/cartReducer.js:
--------------------------------------------------------------------------------
1 | export const CART_ADD_ITEM = 'cart/addItem'
2 | export const CART_REMOVE_ITEM = 'cart/removeItem'
3 | export const CART_ITEM_INCREASE_QUANTITY = 'cart/increaseItemQuantity'
4 | export const CART_ITEM_DECREASE_QUANTITY = 'cart/decreaseItemQuantity'
5 |
6 | export default function cartReducer(state = [], action) {
7 | switch (action.type) {
8 | case CART_ADD_ITEM:
9 | return [...state, action.payload]
10 | case CART_REMOVE_ITEM:
11 | return state.filter(
12 | (cartItem) => cartItem.productId !== action.payload.productId
13 | )
14 | case CART_ITEM_INCREASE_QUANTITY:
15 | return state.map((cartItem) => {
16 | if (cartItem.productId === action.payload.productId) {
17 | return { ...cartItem, quantity: cartItem.quantity + 1 }
18 | }
19 | return cartItem
20 | })
21 |
22 | case CART_ITEM_DECREASE_QUANTITY:
23 | return state
24 | .map((cartItem) => {
25 | if (cartItem.productId === action.payload.productId) {
26 | return { ...cartItem, quantity: cartItem.quantity - 1 }
27 | }
28 | return cartItem
29 | })
30 | .filter((cartItem) => cartItem.quantity > 0)
31 | default:
32 | return state
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 |
15 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/productsReducer.js:
--------------------------------------------------------------------------------
1 | import { productsList } from './productsList'
2 |
3 | export default function productsReducer(state = productsList) {
4 | return state
5 | }
6 |
--------------------------------------------------------------------------------
/06_make-your-own-combineReducer-function/wishListReducer.js:
--------------------------------------------------------------------------------
1 | export const WISHLIST_ADD_ITEM = 'wishList/addItem'
2 | export const WISHLIST_REMOVE_ITEM = 'wishList/removeItem'
3 |
4 | export default function wishListReducer(state = [], action) {
5 | switch (action.type) {
6 | case WISHLIST_ADD_ITEM:
7 | return [...state, action.payload]
8 |
9 | case WISHLIST_REMOVE_ITEM:
10 | return state.filter(
11 | (wishListItem) => wishListItem.productId !== action.payload.productId
12 | )
13 | default:
14 | return state
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux Intro & Reducer Pattern
7 |
8 |
9 |
12 | Redux Intro & Reducer Pattern
13 |
14 |
15 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "00_redux-intro-and-reducer-pattern",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "redux": "^4.2.1"
13 | }
14 | },
15 | "node_modules/@babel/runtime": {
16 | "version": "7.23.1",
17 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
18 | "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
19 | "dependencies": {
20 | "regenerator-runtime": "^0.14.0"
21 | },
22 | "engines": {
23 | "node": ">=6.9.0"
24 | }
25 | },
26 | "node_modules/redux": {
27 | "version": "4.2.1",
28 | "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
29 | "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
30 | "dependencies": {
31 | "@babel/runtime": "^7.9.2"
32 | }
33 | },
34 | "node_modules/regenerator-runtime": {
35 | "version": "0.14.0",
36 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
37 | "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "00_redux-intro-and-reducer-pattern",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "script.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "redux": "^4.2.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/productsReducer.js:
--------------------------------------------------------------------------------
1 | import { productsList } from './productsList'
2 |
3 | export default function productsReducer(state = productsList) {
4 | return state
5 | }
6 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/script.js:
--------------------------------------------------------------------------------
1 | import { combineReducers, createStore } from 'redux'
2 | import productsReducer from './productsReducer'
3 | import cartReducer, {
4 | addCartItem,
5 | decreaseCartItemQuantity,
6 | increaseCartItemQuantity,
7 | } from './cartReducer'
8 | import wishListReducer, {
9 | addWishListItem,
10 | removeWishListItem,
11 | } from './wishListReducer'
12 |
13 | const reducer = combineReducers({
14 | products: productsReducer,
15 | cartItems: cartReducer,
16 | wishList: wishListReducer,
17 | })
18 |
19 | const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__?.())
20 |
21 | console.log(store)
22 |
23 | store.dispatch(addCartItem(1))
24 | store.dispatch(addCartItem(12))
25 |
26 | store.dispatch(increaseCartItemQuantity(12))
27 |
28 | store.dispatch(decreaseCartItemQuantity(12))
29 | store.dispatch(decreaseCartItemQuantity(12))
30 |
31 | store.dispatch(addWishListItem(18))
32 | store.dispatch(addWishListItem(11))
33 |
34 | store.dispatch(removeWishListItem(11))
35 | store.dispatch(removeWishListItem(18))
36 |
--------------------------------------------------------------------------------
/07_action-creators-in-redux/wishListReducer.js:
--------------------------------------------------------------------------------
1 | // Action Types
2 | const WISHLIST_ADD_ITEM = 'wishList/addItem'
3 | const WISHLIST_REMOVE_ITEM = 'wishList/removeItem'
4 |
5 | // Action Creators
6 | export function addWishListItem(productId) {
7 | return { type: WISHLIST_ADD_ITEM, payload: { productId } }
8 | }
9 | export function removeWishListItem(productId) {
10 | return { type: WISHLIST_REMOVE_ITEM, payload: { productId } }
11 | }
12 |
13 | // Reducer
14 | export default function wishListReducer(state = [], action) {
15 | switch (action.type) {
16 | case WISHLIST_ADD_ITEM:
17 | return [...state, action.payload]
18 |
19 | case WISHLIST_REMOVE_ITEM:
20 | return state.filter(
21 | (wishListItem) => wishListItem.productId !== action.payload.productId
22 | )
23 | default:
24 | return state
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/08_connect-redux-with-react/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Product from './components/Product'
3 |
4 | import './App.css'
5 | import { useSelector } from 'react-redux'
6 |
7 | export default function App() {
8 | const productsList = useSelector((state) => state.products)
9 | return (
10 |
11 | {productsList.map(({ id, title, rating, price, image }) => (
12 |
19 | ))}
20 |
4 |
5 |
6 |
7 |
12 |
13 |
{+rating} ★ ★ ★ ★
14 |
${price}
15 |
16 |
17 |
18 |
19 |
20 |
4 |
5 |
6 |
7 |
12 |
13 |
{+rating} ★ ★ ★ ★
14 |
{price}
15 |
16 |
17 |
18 |
19 |
20 |
16 |
17 |
18 |
19 |
{title}
20 |
{rating} ★ ★ ★ ★
21 |
22 |
23 |
${price}
24 |
25 |
28 | {quantity}
29 |
32 |
33 |
${quantity * price}
34 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
9 | {productsList.map(({ id, title, rating, price, image }) => (
10 |
18 | ))}
19 |
6 |
7 |
8 |
9 |
{title}
10 |
{rating} ★ ★ ★ ★
11 |
12 |
13 |
${price}
14 |
15 |
16 | {quantity}
17 |
18 |
19 |
${quantity * price}
20 |
9 |
10 | Shopee
11 |
12 |
13 |
14 |
0
15 |
16 |
4 |
5 |
6 |
7 |
12 |
13 |
{+rating} ★ ★ ★ ★
14 |
${price}
15 |
16 |
17 |
18 |
19 |
20 |
9 | {productsList.map(({ id, title, rating, price, image }) => (
10 |
17 | ))}
18 |
19 |
20 |
21 |
22 |
{title}
23 |
{rating} ★ ★ ★ ★
24 |
25 |
26 |
${price}
27 |
28 |
31 | {quantity}
32 |
35 |
36 |
${quantity * price}
37 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
9 | {productsList.map(({ id, title, rating, price, image }) => (
10 |
18 | ))}
19 |
19 |
20 |
21 |
22 |
{title}
23 |
{rating} ★ ★ ★ ★
24 |
25 |
26 |
${price}
27 |
28 |
31 | {quantity}
32 |
35 |
36 |
${quantity * price}
37 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
10 | {productsList.map(({ id, title, rating, price, image }) => (
11 |
19 | ))}
20 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
10 | {productsList.map(({ id, title, rating, price, image }) => (
11 |
19 | ))}
20 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
10 | {productsList.map(({ id, title, rating, price, image }) => (
11 |
19 | ))}
20 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
10 | {productsList.map(({ id, title, rating, price, image }) => (
11 |
19 | ))}
20 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
9 |
Items in Your Cart
10 |
11 |
12 |
Item
13 |
Price
14 |
Quantity
15 |
Total
16 |
17 | {cartItems.map(
18 | ({ productId, title, rating, price, imageUrl, quantity }) => (
19 |
28 | )
29 | )}
30 |
31 |
32 |
33 |
34 |
35 | $
36 | {cartItems.reduce(
37 | (accumulator, currentItem) =>
38 | accumulator + currentItem.quantity * currentItem.price,
39 | 0
40 | )}
41 |
42 |
43 |
44 |
10 | {productsList.map(({ id, title, rating, price, image }) => (
11 |
19 | ))}
20 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
Loading...
11 | ) : error ? (
12 | {error}
13 | ) : (
14 |
15 | {productsList.map(({ id, title, rating, price, image }) => (
16 |
24 | ))}
25 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
Loading...
16 | ) : error ? (
17 | {error}
18 | ) : (
19 |
20 | {productsList.map(({ id, title, rating, price, image }) => (
21 |
29 | ))}
30 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
Loading...
16 | ) : error ? (
17 | {error}
18 | ) : (
19 |
20 | {productsList.map(({ id, title, rating, price, image }) => (
21 |
29 | ))}
30 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
Loading...
16 | ) : error ? (
17 | {error}
18 | ) : (
19 |
20 | {productsList.map(({ id, title, rating, price, image }) => (
21 |
29 | ))}
30 |
20 |
21 |
22 |
23 |
{title}
24 |
{rating} ★ ★ ★ ★
25 |
26 |
27 |
${price}
28 |
29 |
32 | {quantity}
33 |
36 |
43 |
44 |
${quantity * price}
45 |
8 |
9 |
10 |
11 |
16 |
17 |
{+rating} ★ ★ ★ ★
18 |
${price}
19 |
20 |
21 |
28 |
29 |
30 |
Loading...
16 | ) : error ? (
17 | {error}
18 | ) : (
19 |
20 | {productsList.map(({ id, title, rating, price, image }) => (
21 |
29 | ))}
30 |
Contact Us
,
29 | },
30 | ],
31 | },
32 | ]);
33 |
34 | ReactDOM.createRoot(document.getElementById("root")).render(
35 | ,
36 | );
37 |
--------------------------------------------------------------------------------
/21_rtk-query/final-code/src/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import { api } from "./apiSlice";
3 |
4 | export const store = configureStore({
5 | reducer: {
6 | [api.reducerPath]: api.reducer,
7 | },
8 | middleware: (getDefaultMiddleware) => [
9 | ...getDefaultMiddleware(),
10 | api.middleware,
11 | ],
12 | });
13 |
--------------------------------------------------------------------------------
/21_rtk-query/final-code/tailwind.config.js:
--------------------------------------------------------------------------------
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 | }
9 |
--------------------------------------------------------------------------------
/21_rtk-query/final-code/vite.config.js:
--------------------------------------------------------------------------------
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 | })
8 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/README.md:
--------------------------------------------------------------------------------
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
9 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "tasks": [
3 | {
4 | "id": 1,
5 | "value": "Buy groceries",
6 | "completed": false
7 | },
8 | {
9 | "id": 2,
10 | "value": "Walk the dog",
11 | "completed": true
12 | },
13 | {
14 | "id": 3,
15 | "value": "Finish work project",
16 | "completed": true
17 | },
18 | {
19 | "id": 4,
20 | "value": "Read a book",
21 | "completed": true
22 | },
23 | {
24 | "id": 5,
25 | "value": "Exercise",
26 | "completed": false
27 | },
28 | {
29 | "id": 6,
30 | "value": "Complete Redux",
31 | "completed": false
32 | }
33 | ]
34 | }
35 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "21_rtk-query",
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 | "json-server": "json-server db.json --watch"
12 | },
13 | "dependencies": {
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-router-dom": "^6.21.0"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.2.43",
20 | "@types/react-dom": "^18.2.17",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "autoprefixer": "^10.4.16",
23 | "eslint": "^8.55.0",
24 | "eslint-plugin-react": "^7.33.2",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.4.5",
27 | "json-server": "^0.17.4",
28 | "postcss": "^8.4.32",
29 | "prettier": "^3.1.1",
30 | "prettier-plugin-tailwindcss": "^0.5.9",
31 | "tailwindcss": "^3.3.6",
32 | "vite": "^5.0.8"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 |
3 | export default function App() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | input[type="checkbox"]:checked + label span:first-of-type {
6 | background-color: #10b981;
7 | border-color: #10b981;
8 | color: #fff;
9 | }
10 |
11 | input[type="checkbox"]:checked + label span:nth-of-type(2) {
12 | text-decoration: line-through;
13 | color: #9ca3af;
14 | }
15 |
16 | .tasks-container {
17 | max-height: calc(100vh - 156px);
18 | }
19 |
20 | .task-app ::-webkit-scrollbar {
21 | width: 8px;
22 | }
23 |
24 | .task-app ::-webkit-scrollbar-track {
25 | background-color: rgb(17 24 39);
26 | -webkit-border-radius: 10px;
27 | border-radius: 10px;
28 | }
29 |
30 | .task-app ::-webkit-scrollbar-thumb {
31 | -webkit-border-radius: 10px;
32 | border-radius: 10px;
33 | background: rgba(85, 74, 208, 0.9);
34 | }
35 |
36 | .task-app ::-webkit-scrollbar-thumb:hover {
37 | background: rgba(85, 74, 208);
38 | }
39 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/src/main.jsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom/client";
2 | import App from "./App.jsx";
3 | import Home from "./Home.jsx";
4 | import { RouterProvider, createBrowserRouter } from "react-router-dom";
5 |
6 | import "./index.css";
7 |
8 | const router = createBrowserRouter([
9 | {
10 | path: "/",
11 | element: ,
12 | children: [
13 | {
14 | path: "/",
15 | element: ,
16 | },
17 | {
18 | path: "/contact",
19 | element: Contact Us
,
20 | },
21 | ],
22 | },
23 | ]);
24 |
25 | ReactDOM.createRoot(document.getElementById("root")).render(
26 | ,
27 | );
28 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/tailwind.config.js:
--------------------------------------------------------------------------------
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 | }
9 |
--------------------------------------------------------------------------------
/21_rtk-query/starter-code/vite.config.js:
--------------------------------------------------------------------------------
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 | })
8 |
--------------------------------------------------------------------------------