refactor(store): Refactor reducer initialisation (#298)

* refactor(store): Refactor reducer initialization

Refactored the ngrx/store reducer initialization, because hard to extend the original solution.
Bad practise the object initialization inside the components / services. The new solution use angular DI everywhere.
Separated the web and electron configuration store.

* Media key support (#294)

* Introduce type for KeystrokeAction

* Increment dataModelVersion

New property 'type' for KeystrokeAction

* Mapping for media keys

* Media key selecting support for KeypressTab

* refactor: Use more meaningful name (selectedScancodeOption)

* Store the keystroke type in key action type instead of a new field

* Fix NoneAction validation
Fixes #301

* Update electron version

It fixes electron build. The types are part of the electron package itself.

* Fix keystroke selection when additional field is given but no scancode (#306)

* Additional media keys with icons (#307)

* Add missing scancodes for media keystrokes

* Use icons for media keys

* Fix media scancodes.

* Create README.md

* build: upgrade electron and typescript version

Electron contains the typings files.

* refactor(store): Refactor reducer initialization

Refactored the ngrx/store reducer initialization, because hard to extend the original solution.
Bad practise the object initialization inside the components / services. The new solution use angular DI everywhere.
Separated the web and electron configuration store.

* build: upgrade electron and typescript version

Electron contains the typings files.

* fix(store): Remove the I prefix from IDataStorageRepositoryService

* fix(store): fix observer operator import

* fix(store): Add missing rxjs imports to user-config effect

* fix(store): Add missing rxjs imports to keymap effect

web/src/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, ReflectiveInjector } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -7,6 +7,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { StoreLogMonitorModule, useLogMonitor } from '@ngrx/store-log-monitor';
+import { RouterStoreModule } from '@ngrx/router-store';
 
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
@@ -66,23 +67,14 @@ import { CancelableDirective } from './shared/directives';
 import { CaptureService } from './shared/services/capture.service';
 import { MapperService } from './shared/services/mapper.service';
 
-import { KeymapEffects, MacroEffects } from './shared/store/effects';
-import { userConfigurationReducer, presetReducer } from './shared/store/reducers';
-import { DataStorage } from './shared/store/storage';
+import { KeymapEffects, MacroEffects, UserConfigEffects } from './shared/store/effects';
 
 import { KeymapEditGuard } from './shared/components/keymap/edit';
 import { MacroNotFoundGuard } from './shared/components/macro/not-found';
-
-// Create DataStorage dependency injection
-const storageProvider = ReflectiveInjector.resolve([DataStorage]);
-const storageInjector = ReflectiveInjector.fromResolvedProviders(storageProvider);
-const storageService: DataStorage = storageInjector.get(DataStorage);
-
-// All reducers that are used in application
-const storeConfig = {
-    userConfiguration: storageService.saveState(userConfigurationReducer),
-    presetKeymaps: presetReducer
-};
+import { DATA_STORAGE_REPOSITORY } from './shared/services/datastorage-repository.service';
+import { LocalDataStorageRepositoryService } from './shared/services/local-datastorage-repository.service';
+import { DefaultUserConfigurationService } from './shared/services/default-user-configuration.service';
+import { reducer } from '../../shared/src/store/reducers/index';
 
 @NgModule({
     declarations: [
@@ -140,7 +132,8 @@ const storeConfig = {
         FormsModule,
         DragulaModule,
         routing,
-        StoreModule.provideStore(storeConfig, storageService.initialState()),
+        StoreModule.provideStore(reducer),
+        RouterStoreModule.connectRouter(),
         StoreDevtoolsModule.instrumentStore({
             monitor: useLogMonitor({
                 visible: false,
@@ -150,14 +143,17 @@ const storeConfig = {
         StoreLogMonitorModule,
         Select2Module,
         EffectsModule.runAfterBootstrap(KeymapEffects),
-        EffectsModule.runAfterBootstrap(MacroEffects)
+        EffectsModule.runAfterBootstrap(MacroEffects),
+        EffectsModule.runAfterBootstrap(UserConfigEffects)
     ],
     providers: [
         MapperService,
         appRoutingProviders,
         KeymapEditGuard,
         MacroNotFoundGuard,
-        CaptureService
+        CaptureService,
+        {provide: DATA_STORAGE_REPOSITORY, useClass: LocalDataStorageRepositoryService},
+        DefaultUserConfigurationService
     ],
     bootstrap: [MainAppComponent]
 })