Skip to content

Commit d588d17

Browse files
tahniktahnik
committed
Added redux
1 parent 23a2f60 commit d588d17

File tree

11 files changed

+2052
-86
lines changed

11 files changed

+2052
-86
lines changed

‎bin/app.bundle.js

Lines changed: 1882 additions & 31 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
11
{
2-
"name": "generator-react-express-webpack-babel",
3-
"version": "1.0.0",
4-
"description": "Boilerplate for ReactJS project with ExpressJS server. It uses webpack and babel",
5-
"main": "app.js",
6-
"scripts": {
7-
"start": "node app.js",
8-
"test": "echo \"Error: no test specified\" && exit 1"
9-
},
10-
"repository": {
11-
"type": "git",
12-
"url": "git+https://github.com/tahnik/react-express-webpack-babel"
13-
},
14-
"keywords": [
15-
"react",
16-
"express",
17-
"webpack",
18-
"babel",
19-
"yeoman-generator"
20-
],
21-
"author": "Tahnik Mustasin",
22-
"license": "ISC",
23-
"bugs": {
24-
"url": "https://github.com/tahnik/react-express-webpack-babel/issues"
25-
},
26-
"homepage": "https://github.com/tahnik/react-express-webpack-babel#readme",
27-
"dependencies": {
28-
"babel-core": "^6.10.4",
29-
"babel-loader": "^6.2.4",
30-
"babel-preset-es2015": "^6.9.0",
31-
"babel-preset-react": "^6.11.1",
32-
"babel-preset-stage-1": "^6.5.0",
33-
"express": "^4.14.0",
34-
"react": "^15.2.1",
35-
"react-dom": "^15.2.1",
36-
"webpack": "^1.13.1",
37-
"webpack-dev-server": "^1.14.1"
38-
}
2+
"name": "generator-react-express-webpack-babel",
3+
"version": "1.0.0",
4+
"description": "Boilerplate for ReactJS project with ExpressJS server. It uses webpack and babel",
5+
"main": "app.js",
6+
"scripts": {
7+
"start": "node app.js",
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/tahnik/react-express-webpack-babel"
13+
},
14+
"keywords": [
15+
"react",
16+
"express",
17+
"webpack",
18+
"babel",
19+
"yeoman-generator"
20+
],
21+
"author": "Tahnik Mustasin",
22+
"license": "ISC",
23+
"bugs": {
24+
"url": "https://github.com/tahnik/react-express-webpack-babel/issues"
25+
},
26+
"homepage": "https://github.com/tahnik/react-express-webpack-babel#readme",
27+
"dependencies": {
28+
"babel-core": "^6.10.4",
29+
"babel-loader": "^6.2.4",
30+
"babel-preset-es2015": "^6.9.0",
31+
"babel-preset-react": "^6.11.1",
32+
"babel-preset-stage-1": "^6.5.0",
33+
"express": "^4.14.0",
34+
"react": "^15.2.1",
35+
"react-dom": "^15.2.1",
36+
"react-redux": "^4.4.5",
37+
"redux": "^3.5.2",
38+
"webpack": "^1.13.1",
39+
"webpack-dev-server": "^1.14.1"
40+
}
3941
}

‎public/stylesheets/main.css

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
.helloWorld{
1+
#reactbody{
22
width: 100vw;
33
height: 100vh;
44
text-align: center;
5-
-webkit-transform-style: preserve-3d;
6-
-moz-transform-style: preserve-3d;
7-
transform-style: preserve-3d;
85
}
9-
.helloWorldText{
6+
.main{
107
position: relative;
11-
top: 50%;
12-
transform: translateY(-50%);
13-
font-size: 10vw;
8+
margin-top: 5vh;
149
}

‎views/index.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
3+
import { Provider } from 'react-redux';
4+
import { createStore } from 'redux';
5+
import Main from './src/components/main';
6+
import reducers from './src/reducers/index';
37

4-
class Index extends Component {
5-
render() {
6-
return(
7-
<div className="helloWorld">
8-
<h1 className="helloWorldText">Hello World</h1>
9-
</div>
10-
)
11-
}
12-
}
138

14-
ReactDOM.render(<Index />, document.getElementById("reactbody"));
9+
ReactDOM.render(
10+
<Provider store={createStore(reducers)}>
11+
<Main />
12+
</Provider>,
13+
document.getElementById("reactbody")
14+
);

‎views/src/actions/list_actions.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export function selectItem(listItem) {
2+
return {
3+
type: 'ITEM_SELECTED',
4+
payload: listItem
5+
};
6+
}

‎views/src/components/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { Component } from 'react';
2+
import ListView from '../containers/list_view';
3+
import ListItem from '../containers/list_item';
4+
5+
class Main extends Component {
6+
render() {
7+
return(
8+
<div className="col-md-10 col-md-offset-1 main">
9+
<ListView />
10+
<ListItem />
11+
</div>
12+
)
13+
}
14+
}
15+
16+
export default Main;

‎views/src/containers/list_item.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
4+
class ListItem extends Component{
5+
render(){
6+
if(!this.props.activeItem){
7+
return(
8+
<div>
9+
<h3>Select an item</h3>
10+
<p>Description will appear here</p>
11+
</div>
12+
)
13+
}
14+
return(
15+
<div>
16+
<h3> { this.props.activeItem.name } </h3>
17+
<p>{ this.props.activeItem.description }</p>
18+
</div>
19+
)
20+
}
21+
}
22+
23+
function mapStateToProps(state) {
24+
return {
25+
activeItem: state.activeItem
26+
};
27+
}
28+
29+
export default connect(mapStateToProps)(ListItem);

‎views/src/containers/list_view.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import { bindActionCreators } from 'redux';
4+
import { selectItem } from '../actions/list_actions';
5+
6+
7+
class ListView extends Component {
8+
renderList() {
9+
return this.props.lists.map((listItem) => {
10+
return (
11+
<li
12+
key={listItem.name}
13+
onClick={() => this.props.selectItem(listItem)}
14+
className="list-group-item"
15+
>
16+
{ listItem.name }
17+
</li>
18+
)
19+
})
20+
}
21+
22+
render() {
23+
return (
24+
<div>
25+
<ul className="list-group col-sm-4" >
26+
{ this.renderList() }
27+
</ul>
28+
</div>
29+
)
30+
}
31+
}
32+
33+
function mapStateToProps(state) {
34+
return {
35+
lists: state.lists
36+
};
37+
}
38+
39+
function mapDispatchToProps(dispatch) {
40+
return bindActionCreators({ selectItem: selectItem }, dispatch);
41+
}
42+
43+
export default connect(mapStateToProps, mapDispatchToProps)(ListView);

‎views/src/reducers/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { combineReducers } from 'redux';
2+
import ListItems from './list_items';
3+
import ListItemActive from './list_item_active';
4+
5+
const rootReducer = combineReducers({
6+
lists: ListItems,
7+
activeItem: ListItemActive
8+
})
9+
10+
export default rootReducer;

‎views/src/reducers/list_item_active.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function(state = null, action) {
2+
switch(action.type) {
3+
case 'ITEM_SELECTED':
4+
return action.payload;
5+
}
6+
return state;
7+
}

‎views/src/reducers/list_items.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function() {
2+
return [
3+
{ name: 'Actions', description: 'Description for actions' },
4+
{ name: 'Containers', description: 'Description for containers' },
5+
{ name: 'Reducer', description: 'Description for reducer' }
6+
]
7+
}

0 commit comments

Comments
 (0)