Skip to content

Commit f8e91b1

Browse files
author
sachindra
committed
First Commit for counter usign redux
1 parent 37d149d commit f8e91b1

File tree

10 files changed

+223
-0
lines changed

10 files changed

+223
-0
lines changed

‎actions/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const INCREMENT = 'INCREMENT';
2+
const DECREMENT = 'DECREMENT';
3+
4+
export function incrementAction() {
5+
return {
6+
type: 'INCREMENT'
7+
}
8+
}
9+
10+
export function decrementAction() {
11+
return {
12+
type: 'DECREMENT'
13+
}
14+
}

‎components/counter.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import { incrementAction, decrementAction } from '../actions/index.js';
5+
6+
class AppCounter extends Component {
7+
render() {
8+
return(
9+
<div className="row">
10+
<div className="col-12 text-center pb-4">
11+
<code>{ this.props.countValue }</code>
12+
</div>
13+
<div className="col-6 text-right">
14+
<button type="button" className="btn-danger btn" onClick={ this.props.decrementAction }>Decrement</button>
15+
</div>
16+
<div className="col-6 text-left">
17+
<button type="button" className="btn-primary btn" onClick={ this.props.incrementAction }>Increment</button>
18+
</div>
19+
</div>
20+
)
21+
}
22+
}
23+
24+
function mapStateToProps(state) {
25+
return {
26+
countValue: state.countValue
27+
}
28+
}
29+
30+
export default connect(mapStateToProps, { incrementAction, decrementAction })(AppCounter);

‎components/header.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { Component } from 'react';
2+
3+
class AppHeader extends Component {
4+
render() {
5+
return(
6+
// <h1 className="text-center pb-4">App</h1>
7+
<React.Fragment></React.Fragment>
8+
)
9+
}
10+
}
11+
12+
export default AppHeader;

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Counter App | React and Redux</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
7+
<link rel="stylesheet" href="styles/css.css" />
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

‎index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import { Provider } from 'react-redux';
5+
import store from './store.js';
6+
7+
import AppHeader from './components/header.js';
8+
import AppCounter from './components/counter.js';
9+
10+
class App extends Component {
11+
12+
render() {
13+
return(
14+
<div className="container">
15+
<AppHeader />
16+
<AppCounter />
17+
</div>
18+
)
19+
}
20+
}
21+
22+
ReactDOM.render(
23+
<Provider store={store}>
24+
<App />
25+
</Provider>, document.getElementById('app'));

‎package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "counter",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "webpack-dev-server"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/sachindra149/counter-react-redux.git"
13+
},
14+
"keywords": [
15+
"counter",
16+
"react-redux.",
17+
"basicReduxApp"
18+
],
19+
"author": "",
20+
"license": "ISC",
21+
"bugs": {
22+
"url": "https://github.com/sachindra149/counter-react-redux/issues"
23+
},
24+
"homepage": "https://github.com/sachindra149/counter-react-redux#readme",
25+
"dependencies": {
26+
"react": "^16.8.6",
27+
"react-dom": "^16.8.6",
28+
"react-redux": "^7.0.2",
29+
"redux": "^4.0.1"
30+
},
31+
"devDependencies": {
32+
"babel-core": "^6.26.3",
33+
"babel-loader": "^7.1.5",
34+
"babel-preset-env": "^1.7.0",
35+
"babel-preset-react": "^6.24.1",
36+
"html-webpack-plugin": "^3.2.0",
37+
"webpack": "^4.30.0",
38+
"webpack-dev-server": "^3.3.1"
39+
}
40+
}

‎reducers/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const initialCounter = {
2+
countValue: 15
3+
}
4+
function CounterReducer(state = initialCounter, action) {
5+
6+
switch(action.type) {
7+
8+
case 'INCREMENT':
9+
let incremented = Object.assign({}, state);
10+
incremented.countValue++;
11+
return incremented
12+
13+
case 'DECREMENT':
14+
let decremented = Object.assign({}, state);
15+
decremented.countValue--;
16+
return decremented
17+
18+
default:
19+
return state;
20+
21+
}
22+
23+
}
24+
25+
export default CounterReducer;

‎store.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createStore } from 'redux';
2+
import CounterReducer from './reducers/index.js';
3+
4+
const store = createStore(CounterReducer);
5+
export default store;

‎styles/css.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
2+
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
3+
4+
* {
5+
padding: 0px;
6+
margin: 0px;
7+
transition: all 0.25s ease-out 0s;
8+
}
9+
html, body {
10+
height: 100%;
11+
font-family: 'Noto Serif', serif;
12+
color: #000000;
13+
}
14+
h1, h2, h3, h4, h5, h6 {
15+
font-weight: 700;
16+
}
17+
#app {
18+
height: 100%;
19+
}
20+
a {
21+
color: #000000;
22+
}
23+
a:hover, a:focus {
24+
color: #ff5252;
25+
}
26+
code {
27+
font-size: 2.5rem;
28+
font-weight: 700;
29+
font-family: 'Noto Serif', serif;
30+
color: #000000;
31+
}

‎webpack.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const HtmlWebpackPlugin = require('html-webpack-plugin');
2+
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
3+
template: './index.html',
4+
filename: 'index.html',
5+
inject: 'body'
6+
})
7+
8+
module.exports = {
9+
entry: './index.js',
10+
mode: 'production',
11+
output: {
12+
filename: 'bundle.js'
13+
},
14+
module: {
15+
rules: [
16+
{
17+
test: /\.js$/,
18+
exclude: /(node_modules)/,
19+
use: {
20+
loader: 'babel-loader',
21+
options: {
22+
presets: ['env', 'react']
23+
}
24+
}
25+
}
26+
]
27+
},
28+
plugins: [HtmlWebpackPluginConfig]
29+
}

0 commit comments

Comments
 (0)