Skip to content

Commit 471d786

Browse files
wbuchwalterwbuchwalter
committed
Added counter sample
1 parent 8242d31 commit 471d786

File tree

9 files changed

+176
-0
lines changed

9 files changed

+176
-0
lines changed

‎examples/counter/actions/counter.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
2+
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
3+
4+
export function increment() {
5+
return {
6+
type: INCREMENT_COUNTER
7+
};
8+
}
9+
10+
export function decrement() {
11+
return {
12+
type: DECREMENT_COUNTER
13+
};
14+
}
15+
16+
export function incrementIfOdd() {
17+
return (dispatch, getState) => {
18+
const { counter } = getState();
19+
20+
if (counter % 2 === 0) {
21+
return;
22+
}
23+
24+
dispatch(increment());
25+
};
26+
}
27+
28+
export function incrementAsync(delay = 1000) {
29+
return dispatch => {
30+
setTimeout(() => {
31+
dispatch(increment());
32+
}, delay);
33+
};
34+
}

‎examples/counter/components/counter.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div>
2+
<p>Clicked: {{vm.counter}} times </p>
3+
4+
<button ng-click='vm.increment()'>+</button>
5+
<button ng-click='vm.decrement()'>-</button>
6+
<button ng-click='vm.incrementIfOdd()'>Increment if odd</button>
7+
</div>

‎examples/counter/components/counter.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as CounterActions from '../actions/counter';
2+
import { bindActionCreators } from 'redux';
3+
4+
export default function counter() {
5+
return {
6+
restrict: 'E',
7+
controllerAs: 'vm',
8+
controller: CounterController,
9+
template: require('./counter.html'),
10+
scope: {}
11+
};
12+
}
13+
14+
class CounterController {
15+
16+
constructor($ngRedux) {
17+
this.counter = 0;
18+
$ngRedux.connect(state => ({
19+
counter: state.counter
20+
}),
21+
({counter}) => this.counter = counter);
22+
23+
let {increment, decrement, incrementIfOdd} = bindActionCreators(CounterActions, $ngRedux.dispatch);
24+
this.increment = increment;
25+
this.decrement = decrement;
26+
this.incrementIfOdd = incrementIfOdd;
27+
}
28+
}

‎examples/counter/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5+
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
6+
</head>
7+
<body ng-app='counter'>
8+
<ngr-counter></ngr-counter>
9+
</body>
10+
</html>

‎examples/counter/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import 'angular';
2+
import 'ng-redux';
3+
import rootReducer from './reducers';
4+
import thunk from 'redux-thunk';
5+
import counter from './components/counter';
6+
7+
angular.module('counter', ['ngRedux'])
8+
.config(($ngReduxProvider) => {
9+
$ngReduxProvider.createStoreWith(rootReducer, [thunk]);
10+
})
11+
.directive('ngrCounter', counter);

‎examples/counter/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "ng-redux-counter-example",
3+
"version": "0.0.0",
4+
"description": "ng-redux counter example",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack && webpack-dev-server --content-base build/ --hot"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/wbuchwalter/ngRedux.git"
12+
},
13+
"author": "",
14+
"license": "MIT",
15+
"bugs": {
16+
"url": "https://github.com/wbuchwalter/ngRedux/issues"
17+
},
18+
"homepage": "https://github.com/wbuchwalter/ngRedux#readme",
19+
"devDependencies": {
20+
"babel-core": "^5.8.22",
21+
"babel-loader": "^5.3.2",
22+
"html-loader": "^0.3.0",
23+
"html-webpack-plugin": "^1.6.1",
24+
"webpack": "^1.11.0",
25+
"webpack-dev-server": "^1.10.1"
26+
},
27+
"dependencies": {
28+
"angular": "^1.4.4",
29+
"ng-redux": "file:../../ng-redux-1.0.0-rc.tgz",
30+
"redux": "^1.0.1",
31+
"redux-thunk": "^0.1.0"
32+
}
33+
}

‎examples/counter/reducers/counter.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter';
2+
3+
export default function counter(state = 0, action) {
4+
switch (action.type) {
5+
case INCREMENT_COUNTER:
6+
return state + 1;
7+
case DECREMENT_COUNTER:
8+
return state - 1;
9+
default:
10+
return state;
11+
}
12+
}

‎examples/counter/reducers/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 counter from './counter';
3+
4+
const rootReducer = combineReducers({
5+
counter
6+
});
7+
8+
export default rootReducer;

‎examples/counter/webpack.config.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
var HtmlWebpackPlugin = require('html-webpack-plugin');
4+
5+
module.exports = {
6+
entry: [
7+
'webpack/hot/dev-server',
8+
'./index.js'
9+
],
10+
output: {
11+
path: path.join(__dirname, 'dist'),
12+
filename: 'bundle.js'
13+
},
14+
plugins: [
15+
new HtmlWebpackPlugin({
16+
title: 'ngRedux Counter',
17+
template: './index.html',
18+
inject: 'body'
19+
}),
20+
new webpack.HotModuleReplacementPlugin(),
21+
new webpack.NoErrorsPlugin()
22+
],
23+
resolve: {
24+
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js']
25+
},
26+
devtool: 'source-map',
27+
module: {
28+
loaders: [
29+
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
30+
{ test: /\.html$/, loader: 'html' }
31+
]
32+
}
33+
};

0 commit comments

Comments
 (0)