Introduce redux store

package.json

@@ -18,6 +18,10 @@
   "dependencies": {
     "domready": "^1.0.8",
     "react": "^15.1.0",
-    "react-dom": "^15.1.0"
+    "react-dom": "^15.1.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.1",
+    "object-assign": "4.0.1",
+    "redux-actions": "^0.9.1"
   }
 }

src/actions.js

@@ -0,0 +1,5 @@
+import { createAction } from 'redux-actions';
+
+export const activateApplication = createAction('ACTIVATE_APPLICATION');
+export const updateFormValue = createAction('UPDATE_FORM_VALUE', (propertyName, value) => ({propertyName, value}));
+

src/app.js

@@ -1,91 +1,34 @@
 import React from 'react';
-import {findDOMNode} from 'react-dom';
-
 import Form from './form.js';
+import { connect } from 'react-redux';
+import * as actions from './actions.js';
+import { bindActionCreators } from 'redux';
 
-const fields = [
-  {
-    id: 'name',
-    inputComponentName: 'TextInput',
-    placeholder: 'Enter your name'
-  },
-  {
-    id: 'age',
-    inputComponentName: 'TextInput',
-    placeholder: 'Enter your age'
-  },
-  {
-    id: 'gender',
-    inputComponentName: 'Radio',
-    options: ['male', 'female', 'other']
-  }
-];
-
-export default class App extends React.Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      isActive: false,
-      formData: {
-        name: '',
-        age: ''
-      }
-    };
-    this.toggleActiveState = this.toggleActiveState.bind(this);
     this.handleFormFieldChange = this.handleFormFieldChange.bind(this);
   }
 
   render() {
-    const style = this.state.isActive
+    const style = this.props.appState.isActive
       ?
       {backgroundColor: 'teal', color: 'white'}
       :
       {};
     return (
-      <div style={style} onClick={this.toggleActiveState}>
+      <div style={style} onClick={this.props.actions.activateApplication}>
         <h1>Marathon Estimate</h1>
         <Form
-          fields={fields}
-          formData={this.state.formData}
+          fields={this.props.appState.fields}
           onChange={this.handleFormFieldChange}
         />
-        <div
-          ref='google-map'
-          style={{width: '100px', height: '100px', backgroundColor: '#bada55'}}
-        />
       </div>
     );
   }
 
-  componentDidMount() {
-    const node = findDOMNode(this.refs['google-map']);
-    const el = document.createElement('p');
-    el.innerHTML = 'hello!';
-    node.appendChild(el);
-    el.addEventListener('click', this.onCustomElementClick);
-    this.el = el;
-  }
-
-  componentWillUnmount() {
-    this.el.removeEventListener('click', this.onCustomElementClick);
-  }
-
-  onCustomElementClick() {
-    alert('hello!');
-  }
-
-  toggleActiveState() {
-    this.setState({
-      isActive: !this.state.isActive
-    });
-  }
-
   handleFormFieldChange(value, id) {
-    this.setState({
-      formData: Object.assign({}, this.state.formData, {
-        [id]: value
-      })
-    });
+    this.props.actions.updateFormValue(id, value);
   }
 
   // TODO: implement
@@ -96,3 +39,23 @@ export default class App extends React.Component {
     });
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    appState: state
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);
+
+
+

src/form.js

@@ -12,7 +12,6 @@ export default function Form(props) {
             <Comp
               {...field}
               key={i}
-              value={props.formData[field.id]}
               onChange={props.onChange}
             />
           );

src/index.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import {render} from 'react-dom';
 import domReady from 'domready';
-
 import App from './app.js';
+import { Provider } from 'react-redux';
+import configureStore from './store.js';
+
+const store = configureStore();
 
 domReady(() => {
   const container = document.getElementById('app');
-  render(<App/>, container);
+  render(
+    <Provider store={store}>
+      <App/>
+    </Provider>, container);
 });

src/reducer.js

@@ -0,0 +1,43 @@
+import objectAssign from 'object-assign';
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  fields: [
+    {
+      id: 'name',
+      inputComponentName: 'TextInput',
+      placeholder: 'Enter your name',
+      value: ''
+    },
+    {
+      id: 'age',
+      inputComponentName: 'TextInput',
+      placeholder: 'Enter your age',
+      value: ''
+    },
+    {
+      id: 'gender',
+      inputComponentName: 'Radio',
+      options: ['male', 'female', 'other'],
+      value: []
+    }
+  ],
+  isActive: false
+};
+
+const appState = handleActions({
+  'UPDATE_FORM_VALUE': function (state, action) {
+    let newState = objectAssign({}, state);
+    newState.fields = newState.fields.map(function(field) {
+      console.log(field);
+      if (field.id == action.payload.propertyName) {
+        field.value = action.payload.value;
+      }
+      return field;
+    });
+    return newState;
+  },
+  'ACTIVATE_APPLICATION': (state, action) => objectAssign({}, state, {isActive: true})
+}, initialState);
+
+export default appState;

src/store.js

@@ -0,0 +1,8 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import reducer from './reducer.js';
+
+export default function configureStore(initialState) {
+  return createStore(reducer, initialState,
+    window.devToolsExtension ? window.devToolsExtension() : f => f
+  );
+}