├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.js
├── components
│ ├── Login.js
│ ├── Logout.js
│ └── User.js
├── index.js
└── redux
│ ├── store.js
│ └── userSlice.js
└── yarn.lock
/.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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-redux-lesson
2 | Aula de redux com react publicada em meu canal do youtube
3 |
4 | Instale as dependencias:
5 |
6 | ```bash
7 | yarn
8 | ```
9 |
10 | Para rodar a aplicação e testar execute o comando:
11 |
12 | ```bash
13 | yarn start
14 | ```
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux-react",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.6.1",
7 | "@testing-library/jest-dom": "^5.11.4",
8 | "@testing-library/react": "^11.1.0",
9 | "@testing-library/user-event": "^12.1.10",
10 | "bootstrap": "5.0.2",
11 | "react": "^17.0.2",
12 | "react-bootstrap": "^2.0.0-beta.4",
13 | "react-dom": "^17.0.2",
14 | "react-redux": "^7.2.4",
15 | "react-scripts": "4.0.3",
16 | "web-vitals": "^1.0.1"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | },
42 | "devDependencies": {}
43 | }
44 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Henriquecesp/react-redux-lesson/3cb9dbe432c016d7941e4c459e4baf9318810b29/public/favicon.ico
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Henriquecesp/react-redux-lesson/3cb9dbe432c016d7941e4c459e4baf9318810b29/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Henriquecesp/react-redux-lesson/3cb9dbe432c016d7941e4c459e4baf9318810b29/public/logo512.png
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { Container } from "react-bootstrap";
2 | import Login from "./components/Login";
3 | import Logout from "./components/Logout";
4 | import User from "./components/User";
5 |
6 | function App() {
7 |
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/src/components/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Button, Form, Row, Col } from 'react-bootstrap';
3 | import { useDispatch } from 'react-redux';
4 | import { changeUser } from '../redux/userSlice';
5 |
6 | const Login = () => {
7 | const [name, setName] = useState('');
8 | const dispatch = useDispatch();
9 |
10 | const handleLogin = () => {
11 | dispatch(changeUser(name))
12 | }
13 |
14 | return (
15 |
27 | );
28 | }
29 |
30 | export default Login;
31 |
--------------------------------------------------------------------------------
/src/components/Logout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'react-bootstrap';
3 | import { useDispatch } from 'react-redux';
4 | import { logout } from '../redux/userSlice';
5 |
6 | const Logout = () => {
7 | const dispatch = useDispatch()
8 |
9 | const handleLogout = () => {
10 | dispatch(logout())
11 | }
12 |
13 | return (
14 |
15 |
16 |
17 | );
18 | }
19 |
20 | export default Logout;
21 |
--------------------------------------------------------------------------------
/src/components/User.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector } from 'react-redux';
3 |
4 | const User = () => {
5 | const {name} = useSelector(state => state.user);
6 |
7 | return (
8 |
9 |
Usuário: {name}
10 |
11 | );
12 | }
13 |
14 | export default User;
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import 'bootstrap/dist/css/bootstrap.min.css';
5 | import { Provider } from 'react-redux';
6 | import store from './redux/store'
7 |
8 | ReactDOM.render(
9 |
10 |
11 |
12 |
13 | ,
14 | document.getElementById('root')
15 | );
16 |
17 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit'
2 | import userReducer from './userSlice'
3 |
4 | export default configureStore({
5 | reducer:{
6 | user: userReducer,
7 | }
8 | })
--------------------------------------------------------------------------------
/src/redux/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit'
2 |
3 | export const slice = createSlice({
4 | name: 'user',
5 | initialState: {
6 | name: '',
7 | isLogged: false,
8 | },
9 | reducers: {
10 | changeUser(state, { payload }) {
11 | return {...state, isLogged: true, name: payload}
12 | },
13 | logout(state){
14 | return {...state, isLogged: false, name: ''}
15 | }
16 | }
17 | })
18 |
19 | export const { changeUser, logout } = slice.actions
20 |
21 | export const selectUser = state => state.user
22 |
23 | export default slice.reducer
--------------------------------------------------------------------------------