├── 01_lesson ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── features │ └── counter │ │ ├── Counter.js │ │ └── counterSlice.js │ ├── index.css │ └── index.js ├── 02_lesson ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 02_lesson_starter ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── index.css │ └── index.js ├── 03_lesson ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 03_lesson_starter ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 04_lesson ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 04_lesson_starter ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 05_lesson ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ ├── UserPage.js │ │ ├── UsersList.js │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 05_lesson_starter ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 06_lesson ├── .gitignore ├── data │ └── db.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── features │ ├── api │ │ └── apiSlice.js │ └── todos │ │ └── TodoList.js │ ├── index.css │ └── index.js ├── 06_lesson_starter ├── .gitignore ├── data │ └── db.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── features │ └── todos │ │ └── TodoList.js │ ├── index.css │ └── index.js ├── 07_lesson ├── .gitignore ├── data │ └── db.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── api │ │ └── apiSlice.js │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ ├── UserPage.js │ │ ├── UsersList.js │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 07_lesson_starter ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ ├── UserPage.js │ │ ├── UsersList.js │ │ └── usersSlice.js │ ├── index.css │ └── index.js ├── 08_lesson ├── .gitignore ├── README.md ├── data │ └── db.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── app │ └── store.js │ ├── components │ ├── Header.js │ └── Layout.js │ ├── features │ ├── api │ │ └── apiSlice.js │ ├── posts │ │ ├── AddPostForm.js │ │ ├── EditPostForm.js │ │ ├── PostAuthor.js │ │ ├── PostsExcerpt.js │ │ ├── PostsList.js │ │ ├── ReactionButtons.js │ │ ├── SinglePostPage.js │ │ ├── TimeAgo.js │ │ └── postsSlice.js │ └── users │ │ ├── UserPage.js │ │ ├── UsersList.js │ │ └── usersSlice.js │ ├── index.css │ └── index.js └── README.md /01_lesson/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /01_lesson/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_lesson", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.8.0", 7 | "react": "^17.0.2", 8 | "react-dom": "^17.0.2", 9 | "react-redux": "^7.2.6", 10 | "react-scripts": "5.0.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": [ 19 | "react-app", 20 | "react-app/jest" 21 | ] 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /01_lesson/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/01_lesson/public/favicon.ico -------------------------------------------------------------------------------- /01_lesson/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /01_lesson/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/01_lesson/public/logo192.png -------------------------------------------------------------------------------- /01_lesson/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/01_lesson/public/logo512.png -------------------------------------------------------------------------------- /01_lesson/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /01_lesson/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01_lesson/src/App.js: -------------------------------------------------------------------------------- 1 | import Counter from "./features/counter/Counter"; 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /01_lesson/src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import counterReducer from '../features/counter/counterSlice'; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | counter: counterReducer, 7 | } 8 | }) -------------------------------------------------------------------------------- /01_lesson/src/features/counter/Counter.js: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch } from "react-redux"; 2 | import { 3 | increment, 4 | decrement, 5 | reset, 6 | incrementByAmount 7 | } from './counterSlice'; 8 | import { useState } from "react"; 9 | 10 | const Counter = () => { 11 | const count = useSelector((state) => state.counter.count); 12 | const dispatch = useDispatch(); 13 | 14 | const [incrementAmount, setIncrementAmount] = useState(0); 15 | 16 | const addValue = Number(incrementAmount) || 0; 17 | 18 | const resetAll = () => { 19 | setIncrementAmount(0); 20 | dispatch(reset()); 21 | } 22 | 23 | return ( 24 |
25 |

{count}

26 |
27 | 28 | 29 |
30 | 31 | setIncrementAmount(e.target.value)} 35 | /> 36 | 37 |
38 | 39 | 40 |
41 |
42 | ) 43 | } 44 | export default Counter -------------------------------------------------------------------------------- /01_lesson/src/features/counter/counterSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | count: 0 5 | } 6 | 7 | export const counterSlice = createSlice({ 8 | name: 'counter', 9 | initialState, 10 | reducers: { 11 | increment: (state) => { 12 | state.count += 1; 13 | }, 14 | decrement: (state) => { 15 | state.count -= 1; 16 | }, 17 | reset: (state) => { 18 | state.count = 0; 19 | }, 20 | incrementByAmount: (state, action) => { 21 | state.count += action.payload; 22 | } 23 | } 24 | }); 25 | 26 | export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions; 27 | 28 | export default counterSlice.reducer; -------------------------------------------------------------------------------- /01_lesson/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | font-size: 5rem; 10 | display: grid; 11 | place-content: center; 12 | } 13 | 14 | input, 15 | button { 16 | font: inherit; 17 | padding: 0.5rem; 18 | } 19 | 20 | section { 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | input { 28 | text-align: center; 29 | max-width: 2.5em; 30 | } 31 | 32 | button { 33 | font-size: 2rem; 34 | margin: 0.5em 0 0.5em 0.5em; 35 | min-width: 2em; 36 | } 37 | 38 | button:first-child { 39 | margin-left: 0; 40 | } 41 | -------------------------------------------------------------------------------- /01_lesson/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { store } from './app/store'; 6 | import { Provider } from 'react-redux'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | -------------------------------------------------------------------------------- /02_lesson/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02_lesson/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02_lesson", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.8.0", 7 | "date-fns": "^2.28.0", 8 | "react": "^17.0.2", 9 | "react-dom": "^17.0.2", 10 | "react-redux": "^7.2.6", 11 | "react-scripts": "5.0.0" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": [ 20 | "react-app", 21 | "react-app/jest" 22 | ] 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /02_lesson/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/02_lesson/public/favicon.ico -------------------------------------------------------------------------------- /02_lesson/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02_lesson/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/02_lesson/public/logo192.png -------------------------------------------------------------------------------- /02_lesson/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_redux_toolkit/573491db427848fc611eafa3048990775214d4ad/02_lesson/public/logo512.png -------------------------------------------------------------------------------- /02_lesson/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02_lesson/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02_lesson/src/App.js: -------------------------------------------------------------------------------- 1 | import PostsList from "./features/posts/PostsList"; 2 | import AddPostForm from "./features/posts/AddPostForm"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /02_lesson/src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import postsReducer from '../features/posts/postsSlice'; 3 | import usersReducer from '../features/users/usersSlice'; 4 | 5 | 6 | export const store = configureStore({ 7 | reducer: { 8 | posts: postsReducer, 9 | users: usersReducer 10 | } 11 | }) -------------------------------------------------------------------------------- /02_lesson/src/features/posts/AddPostForm.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | 4 | import { postAdded } from "./postsSlice"; 5 | import { selectAllUsers } from "../users/usersSlice"; 6 | 7 | const AddPostForm = () => { 8 | const dispatch = useDispatch() 9 | 10 | const [title, setTitle] = useState('') 11 | const [content, setContent] = useState('') 12 | const [userId, setUserId] = useState('') 13 | 14 | const users = useSelector(selectAllUsers) 15 | 16 | const onTitleChanged = e => setTitle(e.target.value) 17 | const onContentChanged = e => setContent(e.target.value) 18 | const onAuthorChanged = e => setUserId(e.target.value) 19 | 20 | const onSavePostClicked = () => { 21 | if (title && content) { 22 | dispatch( 23 | postAdded(title, content, userId) 24 | ) 25 | setTitle('') 26 | setContent('') 27 | } 28 | } 29 | 30 | const canSave = Boolean(title) && Boolean(content) && Boolean(userId) 31 | 32 | const usersOptions = users.map(user => ( 33 | 36 | )) 37 | 38 | return ( 39 |
40 |

Add a New Post

41 |
42 | 43 | 50 | 51 | 55 | 56 |