Add basic Redux infra based on ng-redux

.gitignore

@@ -14,6 +14,7 @@ spec/reports/
 tmp/
 .rubocop-*
 .idea/
+.vscode/
 .ruby-version
 vendor/assets/bower_components/
 node_modules/

app/assets/javascripts/application.js

@@ -14,6 +14,7 @@
 //= require angular-bootstrap/ui-bootstrap-tpls
 //= require angular-sanitize
 //= require angular.validators
+//= require ng-redux/dist/ng-redux
 //= require moment
 //= require moment-strftime/lib/moment-strftime
 //= require moment-timezone

app/assets/javascripts/miq_angular_application.js

@@ -6,6 +6,7 @@ ManageIQ.angular.app = angular.module('ManageIQ', [
   'patternfly.charts',
   'frapontillo.bootstrap-switch',
   'angular.validators',
+  'ngRedux',
   'miq.api',
   'miq.card',
   'miq.compat',

app/assets/javascripts/miq_global.js

@@ -84,5 +84,6 @@ if (! window.ManageIQ) {
       debounced: {}, // running debounces
       debounce_counter: 1,
     },
+    redux: null // Redux API
   };
 }

app/javascript/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "globals": {
+    "require": false
+  }
+}

app/javascript/miq-redux/index.ts

@@ -0,0 +1,26 @@
+import { configureNgReduxStore } from './store';
+import { rootReducer, addReducer, clearReducers, applyReducerHash } from './reducer';
+
+const app = ManageIQ.angular.app;
+
+const initialState = {};
+
+// configure Angular application to use ng-redux
+configureNgReduxStore(app, initialState);
+
+// allow unit-testing specific module exports
+if (jasmine) {
+  app.constant('_rootReducer', rootReducer);
+  app.constant('_addReducer', addReducer);
+  app.constant('_clearReducers', clearReducers);
+  app.constant('_applyReducerHash', applyReducerHash);
+}
+
+// initialize Redux namespace upon application startup
+app.run(['$ngRedux', ($ngRedux) => {
+  ManageIQ.redux = {
+    store: $ngRedux,
+    addReducer,
+    applyReducerHash
+  };
+}]);

app/javascript/miq-redux/middleware.ts

@@ -0,0 +1,5 @@
+import { Middleware } from 'redux';
+
+export const middlewares: Middleware[] = [];
+
+// add middleware for handling async operations and side effects

app/javascript/miq-redux/reducer.ts

@@ -0,0 +1,74 @@
+import { Unsubscribe } from 'redux';
+
+import { AppState, AppReducer, Action, AppReducerHash } from './redux-typings';
+
+const reducers: Set<AppReducer> = new Set();
+
+/**
+ * Root reducer, used when creating the Redux store.
+ *
+ * The implementation simply invokes each registered `AppReducer`
+ * in a loop.
+ *
+ * @param state Current application state.
+ * @param action Action being dispatched.
+ *
+ * @returns New application state.
+ */
+export function rootReducer(state: AppState, action: Action): AppState {
+  let newState = state;
+
+  reducers.forEach((appReducer) => {
+    newState = appReducer(newState, action);
+  });
+
+  return newState;
+}
+
+/**
+ * Add given reducer to the list of registered application reducers.
+ *
+ * @param appReducer Reducer to add.
+ *
+ * @returns Function to remove (unsubscribe) the given reducer.
+ */
+export function addReducer(appReducer: AppReducer): Unsubscribe {
+  reducers.add(appReducer);
+
+  return () => {
+    reducers.delete(appReducer);
+  };
+}
+
+/**
+ * Remove all registered application reducers.
+ *
+ * *For testing purposes only.*
+ */
+export function clearReducers(): void {
+  reducers.clear();
+}
+
+/**
+ * Apply a collection of reducers, represented as `AppReducerHash`,
+ * to compute new application state.
+ *
+ * The implementation looks for a key that matches action's `type`.
+ * If present, the corresponding reducer is invoked to compute the
+ * new state. Otherwise, original state is returned.
+ *
+ * @param reducerHash Reducer hash to use.
+ * @param state Current application state.
+ * @param action Action being dispatched.
+ *
+ * @returns New application state.
+ */
+export function applyReducerHash(reducerHash: AppReducerHash, state: AppState, action: Action): AppState {
+  let newState = state;
+
+  if (reducerHash.hasOwnProperty(action.type)) {
+    newState = reducerHash[action.type](state, action);
+  }
+
+  return newState;
+}

app/javascript/miq-redux/redux-typings.ts

@@ -0,0 +1,53 @@
+import { Reducer, Action as BaseAction, Store, Unsubscribe } from 'redux';
+
+/**
+ * Application state.
+ *
+ * Its shape depends on specific `AppReducer` functions added through
+ * `ReduxApi`. Therefore, its shape is dynamic and declared simply as
+ * `object`.
+ */
+export type AppState = object;
+
+/**
+ * Application reducer, operating on `AppState`.
+ *
+ * As per Redux design, reducers should
+ * - be pure functions without side effects,
+ * - return new state if `action` was acted upon, otherwise return
+ *   original state.
+ */
+export type AppReducer = Reducer<AppState>;
+
+/**
+ * Redux action object.
+ *
+ * As per Redux design, each action must define the `type` property.
+ * Any data associated with the action should go into the `payload`.
+ */
+export interface Action extends BaseAction {
+  payload?: any;
+}
+
+/**
+ * Application reducer hash, containing action types as keys and the
+ * corresponding reducers (to handle those action types) as values.
+ */
+export interface AppReducerHash {
+  [propName: string]: AppReducer;
+}
+
+/**
+ * Redux store, holding application's state tree and providing
+ * functions to dispatch actions and subscribe to state changes.
+ */
+export type ReduxStore = Store<AppState>;
+
+/**
+ * `ManageIQ.redux` API.
+ */
+export interface ReduxApi {
+  store: ReduxStore;
+  addReducer(appReducer: AppReducer): Unsubscribe;
+  applyReducerHash(reducerHash: AppReducerHash, state: AppState, action: Action): AppState;
+}

app/javascript/miq-redux/store.ts

@@ -0,0 +1,29 @@
+import { IModule } from 'angular';
+import { devToolsEnhancer, EnhancerOptions } from 'redux-devtools-extension/logOnlyInProduction';
+
+import { rootReducer } from './reducer';
+import { middlewares } from './middleware';
+import { AppState } from './redux-typings';
+
+const devToolsOptions: EnhancerOptions = {};
+
+/**
+ * Configure Angular application to use Redux store using `ng-redux`
+ * implementation.
+ *
+ * The store supports Redux DevTools browser extension in development
+ * as well as production, allowing users to inspect application state.
+ * In production, however, Redux DevTools runs in *log only* mode.
+ *
+ * @param app Angular application to configure.
+ * @param initialState Initial application state.
+ */
+export function configureNgReduxStore(app: IModule, initialState: AppState): void {
+  app.config(['$ngReduxProvider', ($ngReduxProvider) => {
+    $ngReduxProvider.createStoreWith(
+      rootReducer,
+      middlewares,
+      [devToolsEnhancer(devToolsOptions)],
+      initialState);
+  }]);
+}

app/javascript/packs/miq-redux-common.js

@@ -0,0 +1 @@
+require('miq-redux');

app/javascript/typings/globals.d.ts

@@ -0,0 +1,24 @@
+import { IModule } from 'angular';
+
+import { ReduxApi } from '../miq-redux/redux-typings';
+
+interface MiqAngular {
+  app: IModule;
+}
+
+declare global {
+
+  /**
+   * `ManageIQ` runtime global, holding application-specific objects.
+   */
+  namespace ManageIQ {
+    const angular: MiqAngular;
+    let redux: ReduxApi; // initialized by miq-redux pack
+  }
+
+  /**
+   * This global is available when running tests with Jasmine.
+   */
+  const jasmine: any;
+
+}

package.json

@@ -23,11 +23,15 @@
     "@angular/platform-browser": "~4.0.3",
     "@angular/platform-browser-dynamic": "~4.0.3",
     "core-js": "~2.4.1",
+    "ng-redux": "^3.5.2",
+    "redux-devtools-extension": "^2.13.2",
     "rxjs": "~5.3.0",
     "ui-select": "0.19.8",
     "zone.js": "~0.8.5"
   },
   "devDependencies": {
+    "@types/angular": "1.6.29",
+    "@types/redux": "^3.6.0",
     "autoprefixer": "~6.7.7",
     "babel-core": "~6.24.1",
     "babel-eslint": "~6.0.4",