diff --git a/CHANGELOG.md b/CHANGELOG.md
index c467617..5ee839f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
# Changelog
+### v0.3.0
+> Release Date: 25/03/2017
+* Removed old demo page in favour of slow buildout via webpack2
+* Fixed stateless components not working as expected
+* Adding in groundwork for reverse explicit mode
+* Minor adjustments
+* Doc update
+
### v0.2.0
> Release Date: 31/01/2016
* Added in start of demo page
diff --git a/OLD_DEMO.js b/OLD_DEMO.js
deleted file mode 100644
index 40b3b46..0000000
--- a/OLD_DEMO.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import ReactDOM from 'react-dom';
-import React from 'react';
-import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
-import { Provider } from 'redux-synapse';
-import thunkMiddleware from 'redux-thunk';
-import reducers from './reducers';
-import App from './components/App';
-
-const composeEnhancers = typeof window !== 'undefined'
- && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
- window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
- : compose;
-
-const createStoreWithMiddleware = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore);
-const store = createStoreWithMiddleware(combineReducers(reducers));
-
-ReactDOM.render(
-
-
- ,
- document.getElementById('app')
-);
-
diff --git a/demo/components/StockApp.js b/demo/components/StockApp.js
new file mode 100644
index 0000000..c4a8732
--- /dev/null
+++ b/demo/components/StockApp.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TraderCTA from './TraderCTA';
+import StocksTable from './StocksTable';
+import './style.scss';
+
+export default function StockApp() {
+ return (
+
+
Synape Demo Page for Stock Application (In Progress)
+
+
+
+ );
+}
diff --git a/demo/components/StocksTable/StocksTable.js b/demo/components/StocksTable/StocksTable.js
new file mode 100644
index 0000000..ad35088
--- /dev/null
+++ b/demo/components/StocksTable/StocksTable.js
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+export default class StocksTable extends React.Component {
+ static propTypes = {
+ stocks: PropTypes.any.isRequired,
+ addStock: PropTypes.func.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ }
+
+ renderStocks = () => {
+ return this.props.stocks.map((p, i) => {
+ return (
+ {p.name}
+ );
+ });
+ }
+
+ render() {
+ return (
+
+
Stocks Table
+ {this.renderStocks()}
+
+ );
+ }
+}
diff --git a/demo/components/StocksTable/StocksTableContainer.js b/demo/components/StocksTable/StocksTableContainer.js
new file mode 100644
index 0000000..23e39da
--- /dev/null
+++ b/demo/components/StocksTable/StocksTableContainer.js
@@ -0,0 +1,16 @@
+export const mapStateToProps = (state) => {
+ return {
+ stocks: state.stocks.allStocks,
+ };
+};
+
+export const mapDispatchToProps = (dispatch) => {
+ return {
+ addStock: (name, currentValue, previousValue) => dispatch({
+ type: 'ADD_STOCK',
+ name,
+ currentValue,
+ previousValue,
+ }),
+ };
+};
diff --git a/demo/components/StocksTable/index.js b/demo/components/StocksTable/index.js
new file mode 100644
index 0000000..896a7e0
--- /dev/null
+++ b/demo/components/StocksTable/index.js
@@ -0,0 +1,5 @@
+import { synapse } from 'redux-synapse';
+import StocksTable from './StocksTable';
+import { mapStateToProps, mapDispatchToProps } from './StocksTableContainer';
+
+export default synapse(mapStateToProps, mapDispatchToProps, ['stocks'])(StocksTable);
diff --git a/demo/components/TraderCTA/TraderCTA.js b/demo/components/TraderCTA/TraderCTA.js
new file mode 100644
index 0000000..60cb657
--- /dev/null
+++ b/demo/components/TraderCTA/TraderCTA.js
@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+
+export default class TraderCTA extends React.Component {
+ static propTypes = {
+ name: PropTypes.string.isRequired,
+ setName: PropTypes.func.isRequired,
+ setAccountValue: PropTypes.func.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ name: props.name,
+ };
+ }
+
+ handleChange = (e) => {
+ this.setState({
+ name: e.target.value,
+ });
+ }
+
+ handleClick = () => {
+ this.props.setName(this.state.name);
+ }
+
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/demo/components/TraderCTA/TraderCTAContainer.js b/demo/components/TraderCTA/TraderCTAContainer.js
new file mode 100644
index 0000000..9a2fe76
--- /dev/null
+++ b/demo/components/TraderCTA/TraderCTAContainer.js
@@ -0,0 +1,16 @@
+export const mapStateToProps = (state) => {
+ return {
+ name: state.trader.name,
+ accountValue: state.trader.accountValue,
+ };
+};
+
+export const mapDispatchToProps = (dispatch) => {
+ return {
+ setName: (name) => dispatch({
+ type: 'SET_TRADER_NAME',
+ name,
+ }),
+ setAccountValue: () => {},
+ };
+};
diff --git a/demo/components/TraderCTA/index.js b/demo/components/TraderCTA/index.js
new file mode 100644
index 0000000..27e1c89
--- /dev/null
+++ b/demo/components/TraderCTA/index.js
@@ -0,0 +1,5 @@
+import { synapse } from 'redux-synapse';
+import TraderCTA from './TraderCTA';
+import { mapStateToProps, mapDispatchToProps } from './TraderCTAContainer';
+
+export default synapse(mapStateToProps, mapDispatchToProps, ['trader'])(TraderCTA);
diff --git a/demo/components/style.scss b/demo/components/style.scss
new file mode 100644
index 0000000..e1a8f0c
--- /dev/null
+++ b/demo/components/style.scss
@@ -0,0 +1,7 @@
+$font-stack: Helvetica, sans-serif;
+$primary-color: red;
+
+body {
+ font: 100% $font-stack;
+ color: $primary-color;
+}
diff --git a/demo/index.html b/demo/index.html
index 2dc1f52..cda2df0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,13 +1,13 @@
- Synapse Todo Demo
+ Synapse Demo
-
Loading Synapse Demo...
+ =Loading=
-
+
diff --git a/demo/index.js b/demo/index.js
index b0c1a8a..3d40ae7 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -3,16 +3,16 @@ import React from 'react';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider } from 'redux-synapse';
import thunkMiddleware from 'redux-thunk';
-import reducers from './stock/reducers';
-import StockApp from './stock/components/StockApp';
+import reducers from './reducers';
+import StockApp from './components/StockApp';
const composeEnhancers = typeof window !== 'undefined'
&& window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: compose;
-const createStoreWithMiddleware = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore);
-const store = createStoreWithMiddleware(combineReducers(reducers));
+const createComposedStore = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore);
+const store = createComposedStore(combineReducers(reducers));
ReactDOM.render(
diff --git a/demo/records/StockRecord.js b/demo/records/StockRecord.js
new file mode 100644
index 0000000..77c57c0
--- /dev/null
+++ b/demo/records/StockRecord.js
@@ -0,0 +1,9 @@
+import { Record, List } from 'immutable';
+
+export default Record({
+ name: '',
+ currentValue: 0,
+ previousValue: 0,
+ valueDifference: 0,
+ bidHistory: List(),
+});
diff --git a/demo/records/StocksRecord.js b/demo/records/StocksRecord.js
new file mode 100644
index 0000000..89bf9a3
--- /dev/null
+++ b/demo/records/StocksRecord.js
@@ -0,0 +1,12 @@
+import { Record, List } from 'immutable';
+
+const OptionsRecord = Record({
+ updateSpeedMs: 2500,
+});
+
+export default Record({
+ stockTotalValue: 0,
+ allStocks: List(),
+ options: new OptionsRecord(),
+});
+
diff --git a/demo/records/TraderRecord.js b/demo/records/TraderRecord.js
new file mode 100644
index 0000000..7c105b2
--- /dev/null
+++ b/demo/records/TraderRecord.js
@@ -0,0 +1,6 @@
+import { Record } from 'immutable';
+
+export default Record({
+ name: 'NONE_SET',
+ accountValue: 0,
+});
diff --git a/demo/reducers/index.js b/demo/reducers/index.js
new file mode 100644
index 0000000..6987918
--- /dev/null
+++ b/demo/reducers/index.js
@@ -0,0 +1,7 @@
+import trader from './traderReducer';
+import stocks from './stockSReducer';
+
+export default {
+ trader,
+ stocks,
+};
diff --git a/demo/reducers/stocksReducer.js b/demo/reducers/stocksReducer.js
new file mode 100644
index 0000000..777aa80
--- /dev/null
+++ b/demo/reducers/stocksReducer.js
@@ -0,0 +1,37 @@
+import StocksRecord from '../records/StocksRecord';
+import StockRecord from '../records/StockRecord';
+import { List } from 'immutable';
+
+const defaultState = new StocksRecord({
+ allStocks: List([
+ new StockRecord({
+ name: 'FTSE',
+ currentValue: 1000,
+ previousValue: 750,
+ valueDifference: 250,
+ bidHistory: List([
+ 0,
+ ]),
+ }),
+ ]),
+});
+
+const stock = (state = defaultState, action) => {
+ let newState;
+ switch (action.type) {
+ case 'SET_UPDATE_SPEED':
+ newState = state.setIn(['options', 'updateSpeedMs'], action.updateSpeedMs);
+ prepareNotification(['stock-options']);
+ return newState;
+ case 'ADD_STOCK':
+ let allStocks = state.allStocks;
+ allStocks = allStocks.push(new StockRecord(action.stock));
+ newState = state.set('allStocks', allStocks);
+ prepareNotification(['stocks']);
+ return newState;
+ default:
+ return state;
+ }
+};
+
+export default stock;
diff --git a/demo/reducers/traderReducer.js b/demo/reducers/traderReducer.js
new file mode 100644
index 0000000..9737b98
--- /dev/null
+++ b/demo/reducers/traderReducer.js
@@ -0,0 +1,20 @@
+import TraderRecord from '../records/TraderRecord';
+import { prepareNotification } from 'redux-synapse';
+
+const trader = (state = new TraderRecord(), action) => {
+ let newState;
+ switch (action.type) {
+ case 'SET_TRADER_VALUE':
+ newState = state.set('accountValue', action.accountValue);
+ prepareNotification(['trader']);
+ return newState;
+ case 'SET_TRADER_NAME':
+ newState = state.set('name', action.name);
+ prepareNotification(['trader']);
+ return newState;
+ default:
+ return state;
+ }
+};
+
+export default trader;
diff --git a/demo/stock/components/StockApp.js b/demo/stock/components/StockApp.js
deleted file mode 100644
index e69de29..0000000
diff --git a/demo/stock/reducers/index.js b/demo/stock/reducers/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 24a2f16..4b16b0e 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -29,7 +29,7 @@ const config = {
],
},
output: {
- path: __dirname + '/stock/dist',
+ path: __dirname + '/dist',
filename: '[name].bundle.js',
},
resolve: {
diff --git a/package.json b/package.json
index 8122a1d..b792676 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "redux-synapse",
- "version": "0.2.1",
+ "version": "0.3.0",
"main": "lib/index.js",
"files": [
"src",
@@ -22,7 +22,7 @@
"watch:demo": "webpack --watch ./demo --config ./demo/webpack.config.js",
"lint": "eslint ./src",
"test": "jest",
- "test:tc": "jest --runInBand",
+ "test:tc": "jest --runInBand"
},
"author": "Jon Evans (glitch100@gmail.com)",
"license": "MIT",
diff --git a/src/components/synapse.js b/src/components/synapse.js
index 9e6246d..9b55f5f 100644
--- a/src/components/synapse.js
+++ b/src/components/synapse.js
@@ -36,7 +36,10 @@ export default (mapStateToProps, mapDispatchToProps, pathArray) => {
class Synapse extends Component {
constructor(props, context) {
super(props, context);
- this.oldProps = msp(context.store.getState(), props);
+ this.oldProps = {
+ ...msp(context.store.getState(), props),
+ ...mapDispatchToProps ? mapDispatchToProps(context.store.dispatch) : {},
+ };
synapseProps = this.oldProps;
this.state = {
version: 0,