Skip to content
This repository was archived by the owner on Jul 20, 2023. It is now read-only.

Commit 77f8fde

Browse files
hungphan2001hungphan2001
committed
redux hook advanced
Signed-off-by: Hưng Phan <phandinhhungvp2001@gmail.com>
1 parent 14c3ffc commit 77f8fde

File tree

12 files changed

+719
-406
lines changed

12 files changed

+719
-406
lines changed

‎public/css/bootstrap.css‎

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

‎public/css/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.timer{
2+
text-align: center;
3+
color: white;
4+
padding: 50px 0;
5+
}
6+
.timer p{
7+
font-size: 100px;
8+
font-weight: bold;
9+
}
10+
11+
@media (min-width: 768px){
12+
.container{
13+
margin: 10% auto;
14+
}
15+
#timer-up{
16+
border-radius: 5px 0 0 5px;
17+
margin-right: -15px;
18+
}
19+
#timer-down{
20+
margin-left: -15px;
21+
border-radius: 0 5px 5px 0;
22+
}
23+
}
24+
@media (max-width: 768px) {
25+
.container{
26+
margin: 5% auto;
27+
}
28+
#timer-up{
29+
border-radius: 5px 5px 0 0;
30+
}
31+
#timer-down{
32+
border-radius: 0 0 5px 5px;
33+
}
34+
}

‎public/index.html‎

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,14 @@
22
<html>
33

44
<head>
5-
<title>Project Bootstrap4 Basic</title>
6-
<meta charset="utf-8" />
7-
<link rel="stylesheet" href="css/bootstrap.css">
8-
<link rel="stylesheet" href="css/index.css">
9-
<script src="js/jquery-3.4.1.js"></script>
10-
<script src="js/bootstrap.js"></script>
11-
<style>
12-
#main {
13-
margin: auto;
14-
width: 50%;
15-
height: auto;
16-
background: #FF9600;
17-
padding: 20px;
18-
border-radius: 5px;
19-
margin-top: 50px;
20-
}
21-
#main h3{
22-
font-size: 200px;
23-
font-weight: bold;
24-
color: #FFF;
25-
}
26-
</style>
5+
<meta charset="UTF-8">
6+
<title>Timer</title>
7+
<link rel="stylesheet" href="css/bootstrap.css" />
8+
<link rel="stylesheet" href="css/style.css" />
279
</head>
2810

2911
<body>
30-
31-
<div id="root">
32-
33-
</div>
34-
35-
12+
<div id="root"></div>
3613

3714

3815
</body>

‎src/App.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
import logo from './logo.svg';
2-
import './App.css';
3-
import Button from './components/Button';
4-
import Number from './components/Number';
5-
import { useState } from 'react';
6-
import store from './redux/store';
71
import { Provider } from 'react-redux';
8-
2+
import './App.css';
3+
import Down from './components/Down';
4+
import Up from './components/Up';
5+
import store from './redux/store'
96
function App() {
107

118
return (
12-
<Provider store={store}>
13-
<div className="container">
14-
<div className="row">
15-
<div className="col-lg-12 col-md-12 col-sm-12 text-center">
16-
<div id="main">
17-
<Number></Number>
18-
<Button>
19-
</Button>
9+
<>
10+
<Provider store={store}>
11+
<div className="container">
12+
<div className="row justify-content-center">
13+
<div className="col-lg-3 col-md-3 col-sm-8 col-8">
14+
<Up></Up>
15+
</div>
16+
<div className="col-lg-3 col-md-3 col-sm-8 col-8">
17+
<Down></Down>
2018
</div>
21-
</div>
2219
</div>
23-
</div>
20+
</div>
2421
</Provider>
22+
</>
2523
);
2624
}
2725

‎src/components/Button.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/components/Down.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
4+
const Down = () => {
5+
const number = useSelector((store)=>store.downreducer.num)
6+
const dispatch = useDispatch();
7+
const update = ()=>{
8+
dispatch({
9+
type:'Down',
10+
})
11+
}
12+
13+
const reset = () =>{
14+
dispatch({
15+
type:'Reset_down',
16+
})
17+
}
18+
return (
19+
<div className="timer bg-danger" id="timer-down">
20+
<p>{number}</p>
21+
<button onClick={update} type="button" className="btn btn-dark">Down</button>
22+
<button onClick={reset} type="button" className="btn btn-dark">Reset</button>
23+
</div>
24+
)
25+
}
26+
27+
export default Down

‎src/components/Number.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/components/Up.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
4+
const Up = () => {
5+
const number = useSelector((store)=>store.upreducer.num)
6+
const dispatch = useDispatch();
7+
const update = ()=>{
8+
dispatch({
9+
type:'Up',
10+
})
11+
}
12+
13+
const reset = () =>{
14+
dispatch({
15+
type:'Reset',
16+
})
17+
}
18+
return (
19+
<div class="timer bg-info" id="timer-up">
20+
<p>{number}</p>
21+
<button onClick={update}type="button" class="btn btn-dark">Up</button>
22+
<button onClick={reset}type="button" class="btn btn-dark">Reset</button>
23+
</div>
24+
)
25+
}
26+
27+
export default Up

‎src/redux/reducer/downreducer.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const defaultState = {
2+
num: 10,
3+
}
4+
5+
const downreducer = (state = defaultState,action) => {
6+
switch(action.type){
7+
case 'Down' :
8+
let up = state.num-1
9+
return {...state, num:up}
10+
case 'Reset_down' :
11+
return {...state,num:10}
12+
default:
13+
return state;
14+
}
15+
}
16+
export default downreducer;

‎src/redux/reducer/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { combineReducers } from "redux";
2+
import upreducer from './upreducer';
3+
import downreducer from './downreducer';
4+
5+
export default combineReducers({
6+
upreducer:upreducer,
7+
downreducer:downreducer
8+
})

0 commit comments

Comments
 (0)