[POC/WIP] Redux integration

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    ["env", { "modules": false } ]
+    ["env", { "modules": false } ],
+    "es2015",
   ]
 }

.eslintrc.json

@@ -1,14 +1,13 @@
 {
   "root": true,
-  "installedESLint": true,
   "env": {
     "browser": true,
     "jquery": true
   },
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 5,
-    "sourceType": "script",
+    "sourceType": "module",
     "ecmaFeatures": {
       "globalReturn": false,
       "impliedStrict": false

app/javascript/demo/actions/counter/index.js

@@ -0,0 +1,7 @@
+export const increment = () => (
+  { type: 'INCREMENT' }
+);
+
+export const decrement = () => (
+  { type: 'DECREMENT' }
+);

app/javascript/demo/index.js

@@ -0,0 +1,21 @@
+import store from './store';
+import * as counterAction from './actions/counter';
+
+ManageIQ.redux = {};
+ManageIQ.redux.store = store;
+
+// render the current state to the screen.
+const valueEl = document.getElementById('reduxDemo');
+
+const render = () => {
+  valueEl.innerHTML = store.getState().counter.toString();
+};
+
+render();
+
+// re-render on any store change
+store.subscribe(render);
+
+store.dispatch(counterAction.increment());
+store.dispatch(counterAction.increment());
+store.dispatch(counterAction.decrement());

app/javascript/demo/reducers/counter/index.js

@@ -0,0 +1,10 @@
+export default (state = 0, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return state + 1;
+    case 'DECREMENT':
+      return state - 1;
+    default:
+      return state;
+  }
+};

app/javascript/demo/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import counter from './counter';
+
+export default combineReducers({
+  counter,
+});

app/javascript/demo/store/index.js

@@ -0,0 +1,9 @@
+import { createStore } from 'redux';
+import reducers from '../reducers';
+
+let store = createStore(
+  reducers,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+export default store;

app/javascript/packs/redux.js

@@ -0,0 +1 @@
+require('../demo');

app/views/layouts/_header.html.haml

@@ -1,4 +1,5 @@
 = render :partial => 'layouts/about_modal'
+#reduxDemo{style: "float: right; background-color:#3f9c35; font-size:22px;", class: 'card-pf'}
 %nav.navbar.navbar-pf-vertical#notification-app{'ng-controller' => "headerController as vm"}
   .navbar-header
     %button{:type => "button", :class => "navbar-toggle"}
@@ -40,6 +41,7 @@
   = render :partial => "layouts/notifications_drawer"
   = render :partial => "layouts/toast_list"
 
+  = javascript_pack_tag 'manageiq-ui-classic/redux'
 :javascript
   miq_bootstrap('#notification-app', 'miq.notifications');
 

package.json

@@ -22,7 +22,9 @@
     "@angular/core": "~4.0.3",
     "@angular/platform-browser": "~4.0.3",
     "@angular/platform-browser-dynamic": "~4.0.3",
+    "babel-preset-es2015": "^6.24.1",
     "core-js": "~2.4.1",
+    "redux": "^3.7.2",
     "rxjs": "~5.3.0",
     "ui-select": "0.19.8",
     "zone.js": "~0.8.5"