initial commit of files

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": [ "es2015", "react" ],
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "golden-layout-react-redux",
+  "version": "1.0.0",
+  "description": "example showing how to use react-redux with golden-layout",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "dev": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andrewcapodieci/golden-layout-react-redux.git"
+  },
+  "keywords": [
+    "react",
+    "redux",
+    "react-redux",
+    "golden-layout"
+  ],
+  "author": "Andrew Capodieci <[email protected]>",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/andrewcapodieci/golden-layout-react-redux/issues"
+  },
+  "homepage": "https://github.com/andrewcapodieci/golden-layout-react-redux#readme",
+  "dependencies": {
+    "babel": "^6.23.0",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "golden-layout": "^1.5.8",
+    "html-webpack-plugin": "^2.28.0",
+    "immutable": "^3.8.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}

src/ActionCreators.js

@@ -0,0 +1,18 @@
+export function setState(state) {
+    return {
+        type: 'SET_STATE',
+        state
+    };
+}
+
+export function incrementCount() {
+    return {
+        type: 'INCREMENT_COUNT'
+    };
+}
+
+export function decrementCount() {
+    return {
+        type: 'DECREMENT_COUNT'
+    };
+}

src/components/DecrementButton.jsx

@@ -0,0 +1,16 @@
+// Pure react component. Should not be connected to redux store; its container
+// should be connected to the store.
+import {decrementCount} from '../ActionCreators';
+import {connect} from 'react-redux';
+
+class DecrementButton extends React.Component {
+    render() {
+        return (
+            <button onClick={() => this.props.decrementCount()}>Decrement Count</button>
+        );
+    }
+}
+
+export const DecrementButtonContainer = connect(
+    decrementCount
+)(DecrementButton);

src/components/GoldenLayoutWrapper.jsx

@@ -0,0 +1,67 @@
+import GoldenLayout from 'golden-layout';
+import {Provider} from 'react-redux';
+import {IncrementButtonContainer} from './IncrementButton';
+import {DecrementButtonContainer} from './DecrementButton';
+import {TestComponentContainer} from './TestComponent';
+
+class GoldenLayoutWrapper extends React.Component {
+    componentDidMount() {
+        // Build basic golden-layout config
+        const config = {
+            content: [{
+                type: 'row',
+                content: [{
+                    type: 'react-component',
+                    component: 'TestComponentContainer'
+                },{
+                    type: 'react-component',
+                    component: 'IncrementButtonContainer'
+                },{
+                    type: 'react-component',
+                    component: 'DecrementButtonContainer'
+                }]
+            }]
+        };
+
+        function wrapComponent(component, store) {
+            class Wrapped extends React.Component {
+                render() {
+                    return (
+                        <Provider store={store}>
+                            <component {...this.props}/>
+                        </Provider>
+                    );
+                }
+            }
+            return Wrapped;
+        };
+
+        var layout = new GoldenLayout(config, '#goldenLayout');
+        layout.registerComponent('IncrementButtonContainer', 
+                                 wrapComponent(IncrementButtonContainer, this.context.store)
+        );
+        layout.registerComponent('DecrementButtonContainer',
+                                 wrapComponent(DecrementButtonContainer, this.context.store)
+        );
+        layout.registerComponent('TestComponentContainer',
+                                 wrapComponent(TestComponentContainer, this.context.store)
+        );
+        layout.init();
+    }
+
+    render() {
+        return (
+            <div id="goldenLayout"/>
+        );
+    }
+}
+
+// ContextTypes must be defined in order to pass the redux store to exist in
+// "this.context". The redux store is given to GoldenLayoutWrapper from its
+// surrounding <Provider> in index.jsx.
+GoldenLayoutWrapper.contextTypes = {
+    store: React.PropTypes.object.isRequired
+};
+
+
+export default GoldenLayoutWrapper;

src/components/IncrementButton.jsx

@@ -0,0 +1,20 @@
+import {incrementCount} from '../ActionCreators';
+import {connect} from 'react-redux';
+
+// Pure react component. Should not be connected to redux store; its container
+// should be connected to the store.
+class IncrementButton extends React.Component {
+    render() {
+        return (
+            <button onClick={() => this.props.incrementCount()}>Increment Count</button>
+        );
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    decrementCount: dispatch(decrementCount())
+}
+
+export const IncrementButtonContainer = connect(
+    incrementCount
+)(IncrementButton);

src/components/TestComponent.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+// Pure react component. Should not be connected to redux store; its container
+// should be connected to the store.
+export class TestComponent extends React.Component {
+    render() {
+        return (
+            <h1>{this.props.label}</h1>
+        );
+    }
+}
+
+TestComponent.PropTypes = {
+    label: PropTypes.number.isRequired
+}
+
+function mapStateToProps(state) {
+    return {
+        label: state.get('count')
+    }
+}
+
+export const TestComponentContainer = connect(mapStateToProps)(TestComponent);

src/core.js

@@ -0,0 +1,11 @@
+import {Map} from 'immutable';
+
+export function incrementCount(state)
+{
+    return state.update('count', count => count+1);
+}
+
+export function decrementCount(state)
+{
+    return state.update('count', count => count-1);
+}

src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <script src="https://fb.me/react-15.3.0.js"></script>
+        <script src="https://fb.me/react-dom-15.3.0.js"></script>
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
+        <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />
+        <link type="text/css" rel="stylesheet" href="https://golden-layout.com/assets/css/goldenlayout-dark-theme.css" />
+
+        <title>React-Redux with GoldenLayout</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="bundle.js"></script>
+    </body>
+</html>

src/index.jsx

@@ -0,0 +1,15 @@
+import GoldenLayoutWrapper from './components/GoldenLayoutWrapper';
+import {createStore} from 'redux';
+import {Provider} from 'react-redux';
+import reducer from './reducer';
+import {setState} from './ActionCreators';
+
+const store = createStore(reducer);
+store.dispatch(setState({ 'count': 0 })); 
+
+ReactDOM.render(
+    <Provider store={store}>
+        <GoldenLayoutWrapper/>
+    </Provider>,
+    document.getElementById('root')
+);

src/reducer.js

@@ -0,0 +1,21 @@
+import {Map} from 'immutable';
+import {
+    incrementCount,
+    decrementCount
+} from './core';
+
+function setState(state, newState) {
+    return state.merge(newState);
+}
+
+export default function(state = Map(), action) {
+    switch(action.type) {
+    case 'SET_STATE':
+        return setState(state, action.state);
+    case 'INCREMENT_COUNT':
+        return incrementCount(state);
+    case 'DECREMENT_COUNT':
+        return decrementCount(state);
+    }
+    return state;
+}

webpack.config.babel.js

@@ -0,0 +1,44 @@
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+export default () => ({
+    entry: [
+        'webpack-dev-server/client?http://localhost:8080', // webpack dev server host and port
+        path.join(__dirname, 'src/index.jsx'), // entry point of app
+    ],
+    output: {
+        path: path.join(__dirname + '/dist'),
+        filename: 'bundle.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+           filename: 'index.html',
+           template: './src/index.html'
+        })
+    ],
+    module: {
+        rules: [{
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            include: path.join(__dirname, 'src'),
+            use: [{
+                loader: 'babel-loader',
+                options: {
+                    babelrc: false, // Tells webpack not to use the .babelrc file
+                    presets: [
+                        ['babel-preset-env', { 
+                            "targets": { "firefox": 52, "chrome": 55 },
+                            "modules": false,
+                            "loose": true
+                        }],
+                        'react' // Transform JSX into React.createElement calls
+                    ]
+                }
+            }]
+        }]
+    },
+    resolve: {
+        extensions: ['.js', '.jsx']
+    },
+    devtool: 'source-map'
+});