Skip to content

Commit 86c69cf

Browse files
author
Mahidhar Chaluvadi
committed
Updated to include redux and just the actions, no reducers
1 parent 297a384 commit 86c69cf

5 files changed

Lines changed: 123 additions & 38 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"react-dom": "^16.4.2",
1010
"react-router": "^4.3.1",
1111
"react-router-dom": "^4.3.1",
12-
"react-scripts": "1.1.5"
12+
"react-scripts": "1.1.5",
13+
"redux": "^4.0.0"
1314
},
1415
"scripts": {
1516
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

‎src/components/Expensify/Layout/Header/index.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import React from 'react';
2-
import {Link,NavLink} from 'react-router-dom';
3-
import './../../styles/Header.css';
1+
import React from "react";
2+
import {Link,NavLink} from "react-router-dom";
3+
import "./../../styles/Header.css";
44

55
export default () =>
6-
<div>
7-
<h1>Expensify App</h1>
8-
<ul>
9-
<li><NavLink to='/' activeClassName="is-active" exact>Dashboard</NavLink></li>
10-
<li><NavLink to='/create' activeClassName="is-active" exact>Add Expense</NavLink></li>
11-
<li><NavLink to='/edit' activeClassName="is-active">Edit Expense</NavLink></li>
12-
<li><NavLink to='/help' activeClassName="is-active">Help</NavLink></li>
13-
<li><Link to='/create/1'>Non Existing Page</Link></li>
14-
</ul>
15-
</div>;
6+
<div>
7+
<h1>Expensify App</h1>
8+
<ul>
9+
<li><NavLink to='/' activeClassName="is-active" exact>Dashboard</NavLink></li>
10+
<li><NavLink to='/create' activeClassName="is-active" exact>Add Expense</NavLink></li>
11+
<li><NavLink to='/edit' activeClassName="is-active">Edit Expense</NavLink></li>
12+
<li><NavLink to='/help' activeClassName="is-active">Help</NavLink></li>
13+
<li><NavLink to='/playground' activeClassName="is-active">Playground</NavLink></li>
14+
<li><Link to='/create/1'>Non Existing Page</Link></li>
15+
</ul>
16+
</div>;

‎src/components/Utilities/destructuring.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
3+
const book ={
4+
title:"Ego is the enemy",
5+
author:"Ryan Holiday",
6+
publisher:{
7+
name:"Penguin"
8+
}
9+
};
10+
11+
const {title} = book;
12+
const {name:publisherName = "Self Published"} = book.publisher;
13+
14+
console.log(`${title} : ${publisherName}`);
15+
16+
const cofeeShopMenuItem = ["Vanilla Latte (Cold)","$2.00","$2.50","$2.75"];
17+
18+
const [menuItem,,mediumPrice] = cofeeShopMenuItem;
19+
20+
console.log(`${menuItem} - medium - price - ${mediumPrice}`);
21+
22+
export default () =>
23+
<div>This is destructuring playground !!</div>;

‎src/components/Utilities/redux-101.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
3+
import { createStore } from "redux";
4+
5+
// Action Generators
6+
7+
const incrementCount =({incrementBy = 2} = {}) =>({
8+
type:"INCREMENT",
9+
incrementBy
10+
});
11+
12+
const decrementCount =({decrementBy = 1} = {}) =>({
13+
type:"DECREMENT",
14+
decrementBy
15+
});
16+
17+
const resetCount =() =>({
18+
type:"RESET"
19+
});
20+
21+
const setCount =({count=1} ={}) =>({
22+
type:"SET",
23+
count
24+
});
25+
26+
const store = createStore((state ={count:0},action) => {
27+
// console.log("store created/updated");
28+
switch(action.type)
29+
{
30+
case "INCREMENT":return {count:state.count+action.incrementBy};
31+
case "DECREMENT":return {count:state.count-action.decrementBy};
32+
case "RESET":return {count: 0};
33+
case "SET":return {count:action.count};
34+
default: return state;
35+
}
36+
});
37+
38+
const unsubscribe = store.subscribe(()=>{
39+
console.log("Subscribed. Cur state",store.getState());
40+
});
41+
// console.log(store.getState());
42+
43+
// Actions
44+
store.dispatch(incrementCount({incrementBy:3}));
45+
46+
store.dispatch(decrementCount({decrementBy:3}));
47+
48+
store.dispatch(setCount({count:55}));
49+
50+
unsubscribe();
51+
52+
store.dispatch(resetCount());
53+
54+
console.log(store.getState());
55+
56+
export default () => <div>This is Redux Playground file. At this time state is {JSON.stringify(store.getState())}</div>;

‎src/routers/ExpensifyRouter.js‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
import React from 'react';
2-
import {BrowserRouter,Route,Switch} from 'react-router-dom';
1+
import React from "react";
2+
import { BrowserRouter, Route, Switch } from "react-router-dom";
33

4-
import ExpensifyDashboard from '../components/Expensify/Dashboard'
5-
import AddExpense from '../components/Expensify/AddExpense';
6-
import EditExpense from '../components/Expensify/EditExpense';
7-
import Help from '../components/Expensify/Help';
8-
import PageNotFound from '../components/Expensify/PageNotFound';
9-
import Header from '../components/Expensify/Layout/Header';
4+
import ExpensifyDashboard from "../components/Expensify/Dashboard";
5+
import AddExpense from "../components/Expensify/AddExpense";
6+
import EditExpense from "../components/Expensify/EditExpense";
7+
import Help from "../components/Expensify/Help";
8+
import PageNotFound from "../components/Expensify/PageNotFound";
9+
import Header from "../components/Expensify/Layout/Header";
1010

11-
export default
11+
import Playground from "./../components/Utilities/redux-101";
12+
// import Playground from "./../components/Utilities/destructuring";
13+
14+
export default
1215
<div>
13-
<BrowserRouter>
14-
<div>
15-
<Header />
16-
<center>
17-
<Switch>
18-
<Route path="/" component={ExpensifyDashboard} exact />
19-
<Route path="/create" component={AddExpense} exact/>
20-
<Route path="/edit/:id" component={EditExpense} />
21-
<Route path="/help" component={Help} />
22-
<Route component={PageNotFound} />
23-
</Switch>
24-
</center>
25-
</div>
26-
</BrowserRouter>
27-
</div>
16+
<BrowserRouter>
17+
<div>
18+
<Header />
19+
<center>
20+
<Switch>
21+
<Route path="/" component={ExpensifyDashboard} exact />
22+
<Route path="/create" component={AddExpense} exact />
23+
<Route path="/edit/:id" component={EditExpense} />
24+
<Route path="/help" component={Help} />
25+
<Route path="/playground" component={Playground} />
26+
<Route component={PageNotFound} />
27+
</Switch>
28+
</center>
29+
</div>
30+
</BrowserRouter>
31+
</div>
2832
;

0 commit comments

Comments
 (0)