Skip to content
This repository was archived by the owner on Feb 11, 2021. It is now read-only.

Commit 7b42441

Browse files
committed
Merge pull request #1 from coderkevin/simple-example
Simple example
2 parents e2fc94e + 1a63d03 commit 7b42441

22 files changed

+707
-0
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
lib

examples/simple/.babelrc

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"stage": 2,
3+
"env": {
4+
"development": {
5+
"plugins": [
6+
"react-transform"
7+
],
8+
"extra": {
9+
"react-transform": {
10+
"transforms": [ {
11+
"transform": "react-transform-hmr",
12+
"imports": [ "react" ],
13+
"locals": [ "module" ]
14+
} ]
15+
}
16+
}
17+
}
18+
}
19+
}

examples/simple/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const SET_NUMBER_ENTRY = 'SET_NUMBER_ENTRY';
2+
3+
export function setNumberEntry( number ) {
4+
return {
5+
type: SET_NUMBER_ENTRY,
6+
number
7+
};
8+
}
9+

examples/simple/actions/primes.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
export const ADD_PRIME = 'ADD_PRIME';
3+
export const ADD_NON_PRIME = 'ADD_NON_PRIME';
4+
export const ADD_QUEUE_NUMBER = 'ADD_QUEUE_NUMBER';
5+
export const REMOVE_QUEUE_NUMBER = 'REMOVE_QUEUE_NUMBER';
6+
7+
export function addQueueNumber( number ) {
8+
return {
9+
type: ADD_QUEUE_NUMBER,
10+
number
11+
};
12+
}
13+
14+
export function removeQueueNumber( number ) {
15+
return {
16+
type: REMOVE_QUEUE_NUMBER,
17+
number
18+
};
19+
}
20+
21+
export function addPrime( number ) {
22+
return {
23+
type: ADD_PRIME,
24+
number
25+
};
26+
}
27+
28+
export function addNonPrime( number ) {
29+
return {
30+
type: ADD_NON_PRIME,
31+
number
32+
};
33+
}
34+
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
export default class NumberList extends Component {
4+
render() {
5+
const { numbers } = this.props;
6+
7+
return (
8+
<div>
9+
<ul>
10+
{
11+
numbers.map( ( value ) => {
12+
return <li>{ value }</li>;
13+
} )
14+
}
15+
</ul>
16+
</div>
17+
);
18+
}
19+
}
20+
21+
NumberList.propTypes = {
22+
numbers: PropTypes.array.isRequired
23+
};
24+
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
export default class NumberPicker extends Component {
4+
render() {
5+
const { submitText, value, onChange, onSubmit } = this.props;
6+
7+
return (
8+
<span>
9+
<form onSubmit={ onSubmit }>
10+
<label>
11+
Number:
12+
<input type="text" value={ value } onChange={ onChange } />
13+
</label>
14+
<button type="submit" value="Submit">{ submitText }</button>
15+
</form>
16+
</span>
17+
);
18+
}
19+
}
20+
21+
NumberPicker.propTypes = {
22+
submitText: PropTypes.string.isRequired,
23+
value: PropTypes.string.isRequired,
24+
onChange: PropTypes.func.isRequired,
25+
onSubmit: PropTypes.func.isRequired
26+
};
27+
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
export default class WorkingMessage extends Component {
4+
render() {
5+
const { count, itemType } = this.props;
6+
7+
return (
8+
<span>
9+
Working on { count } { itemType }(s).
10+
</span>
11+
);
12+
}
13+
}
14+
15+
WorkingMessage.propTypes = {
16+
count: PropTypes.number.isRequired,
17+
itemType: PropTypes.string.isRequired
18+
};
19+

examples/simple/containers/App.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { connect } from 'react-redux';
3+
import NumberPicker from '../components/NumberPicker';
4+
import NumberList from '../components/NumberList';
5+
import WorkingMessage from '../components/WorkingMessage';
6+
import { setNumberEntry } from '../actions/numberentry';
7+
import { addQueueNumber } from '../actions/primes';
8+
9+
class App extends Component {
10+
constructor( props ) {
11+
super( props );
12+
this.handleNumberEntryChange = this.handleNumberEntryChange.bind( this );
13+
this.handleNumberEntrySubmit = this.handleNumberEntrySubmit.bind( this );
14+
}
15+
16+
handleNumberEntryChange( e ) {
17+
this.props.dispatch( setNumberEntry( e.target.value ) );
18+
}
19+
20+
handleNumberEntrySubmit( e ) {
21+
e.preventDefault();
22+
23+
const { numberEntry } = this.props;
24+
this.props.dispatch( setNumberEntry( '' ) );
25+
this.props.dispatch( addQueueNumber( numberEntry ) );
26+
}
27+
28+
render() {
29+
const submitText = "Add Number";
30+
const { numberEntry, primes, nonPrimes, queue } = this.props;
31+
let workMessage = <span> &nbsp; </span>;
32+
33+
if ( queue.length > 0 ) {
34+
workMessage = <WorkingMessage count={ queue.length } itemType="number" />;
35+
}
36+
37+
return (
38+
<div>
39+
<h1>Calculate Prime Numbers</h1>
40+
<NumberPicker submitText={ submitText }
41+
value={ numberEntry }
42+
onChange={ this.handleNumberEntryChange }
43+
onSubmit={ this.handleNumberEntrySubmit } />
44+
45+
<em>{ workMessage }</em>
46+
47+
<h2>Primes</h2>
48+
<NumberList numbers={ primes } />
49+
<h2>Non-Primes</h2>
50+
<NumberList numbers={ nonPrimes } />
51+
</div>
52+
);
53+
}
54+
}
55+
56+
App.propTypes = {
57+
numberEntry: PropTypes.string.isRequired,
58+
primes: PropTypes.array.isRequired,
59+
nonPrimes: PropTypes.array.isRequired,
60+
queue: PropTypes.array.isRequired,
61+
dispatch: PropTypes.func.isRequired
62+
};
63+
64+
function mapStateToProps( state ) {
65+
const { numberEntry, primeState } = state;
66+
const { primes, nonPrimes, queue } = primeState;
67+
68+
return {
69+
numberEntry,
70+
primes,
71+
nonPrimes,
72+
queue
73+
};
74+
}
75+
76+
export default connect( mapStateToProps )( App );
77+

examples/simple/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>redux-trigger simple example</title>
5+
</head>
6+
<body>
7+
<div id="root">
8+
</div>
9+
<script src="/static/bundle.js"></script>
10+
</body>
11+
</html>

examples/simple/index.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import 'babel-core/polyfill';
2+
import React from 'react';
3+
import { render } from 'react-dom';
4+
import { Provider } from 'react-redux';
5+
import App from './containers/App';
6+
import configureStore from './store/configureStore';
7+
import { addQueueTrigger } from './triggers/primeStateTriggers';
8+
9+
const store = configureStore();
10+
store.dispatch( addQueueTrigger() );
11+
12+
const rootComponent =
13+
<Provider store={ store }>
14+
<App />
15+
</Provider>;
16+
17+
render( rootComponent, document.getElementById( 'root' ) );
18+
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { removeQueueNumber, addPrime, addNonPrime } from '../actions/primes';
2+
3+
export const CHECK_PRIMES = 'CHECK_PRIMES';
4+
5+
let workers = {};
6+
7+
function createPrimesMiddleware() {
8+
return ( store ) => ( next ) => ( action ) => {
9+
10+
switch ( action.type ) {
11+
case CHECK_PRIMES:
12+
const { queue } = store.getState().primeState;
13+
checkPrimes( queue, store.dispatch );
14+
return true;
15+
default:
16+
return next( action );
17+
}
18+
};
19+
}
20+
21+
function checkPrimes( queue, dispatch ) {
22+
if ( queue.length > 0 ) {
23+
24+
queue.forEach( ( number ) => {
25+
if ( ! workers[ number ] ) {
26+
checkPrime( number ).then(
27+
( isPrime ) => {
28+
dispatch( removeQueueNumber( number ) );
29+
if ( isPrime ) {
30+
dispatch( addPrime( number ) );
31+
} else {
32+
dispatch( addNonPrime( number ) );
33+
}
34+
}
35+
);
36+
}
37+
} );
38+
39+
const number = queue[0];
40+
}
41+
}
42+
43+
function checkPrime( number ) {
44+
45+
return new Promise(
46+
( resolve, reject ) => {
47+
// Create a worker to do the actual mathematical operations.
48+
const worker = new Worker( '/static/worker-primes.js' );
49+
workers[ number ] = worker;
50+
51+
worker.onmessage = function( evt ) {
52+
// Got the result back from the worker, clean up and resolve.
53+
const isPrime = evt.data;
54+
delete workers[ number ];
55+
resolve( isPrime );
56+
}
57+
58+
worker.postMessage( Number( number ) );
59+
}
60+
);
61+
}
62+
63+
export function checkPrimesAction() {
64+
return { type: CHECK_PRIMES };
65+
}
66+
67+
export default createPrimesMiddleware;
68+

examples/simple/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "redux-trigger-simple-example",
3+
"version": "0.0.0",
4+
"description": "Simple example using redux-trigger",
5+
"scripts": {
6+
"build-dev": "npm run clean && npm run build-client-dev",
7+
"build-client-dev": "node_modules/webpack/bin/webpack.js -d --progress --colors",
8+
"clean": "rimraf dist",
9+
"start": "npm run build-dev && node server.babel.js",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/coderkevin/redux-trigger.git"
15+
},
16+
"keywords": [
17+
"redux",
18+
"react",
19+
"reactjs",
20+
"webpack"
21+
],
22+
"author": "Kevin Killingsworth <kevin@redfenix.com>",
23+
"license": "MIT",
24+
"bugs": {
25+
"url": "https://github.com/coderkevin/redux-trigger/issues"
26+
},
27+
"homepage": "https://github.com/coderkevin/redux-trigger",
28+
"dependencies": {
29+
"express": "^4.13.3",
30+
"react": "^0.14.3",
31+
"react-dom": "^0.14.3",
32+
"react-redux": "^4.0.5",
33+
"redux": "^3.0.5",
34+
"redux-logger": "^2.3.1",
35+
"redux-multi": "^0.1.10"
36+
},
37+
"devDependencies": {
38+
"babel": "^5.8.29",
39+
"babel-core": "^5.8.32",
40+
"babel-loader": "^5.3.2",
41+
"babel-plugin-react-transform": "^1.1.1",
42+
"react-transform-hmr": "^1.0.1",
43+
"rimraf": "^2.5.0",
44+
"webpack": "^1.12.9",
45+
"webpack-dev-middleware": "^1.4.0",
46+
"webpack-hot-middleware": "^2.6.0"
47+
},
48+
"engine": "node >= 5.7.1"
49+
}

0 commit comments

Comments
 (0)