Updated selectors to default to initial state.

Updated window effects.

src/app/actions/windows/windows.ts

@@ -20,7 +20,7 @@ export class SetWindowsAction implements Action {
 export class RemoveWindowAction implements Action {
     readonly type = REMOVE_WINDOW;
 
-    constructor(public windowId: string) {}
+  constructor(public payload: any) {}
 }
 
 export type Action = AddWindowAction | SetWindowsAction | RemoveWindowAction;

src/app/containers/app/app.component.ts

@@ -88,7 +88,11 @@ export class AppComponent {
 
         // Set the window IDs in the meta state if it does not already exist
         if (data.windowsMeta.windowIds) {
-          this.windowIds = data.windowsMeta.windowIds;
+          // Filter the IDs based on the windows that are valid.
+          // This fixes issues with when windows are removed.
+          // Before the effect gets the remove action, the store has already been updated.
+          // While this is valid, it causes the component to try to retrieve the invalid window.
+          this.windowIds = data.windowsMeta.windowIds.filter(id => !!this.windows[id]);
         } else {
           this.store.dispatch(new windowsMetaActions.SetWindowIdsAction( { ids: this.windowIds }));
         }

src/app/effects/windows.ts

@@ -11,14 +11,29 @@ import * as windowsMetaActions from '../actions/windows-meta/windows-meta';
 @Injectable()
 export class WindowsEffects {
 
-  @Effect() // remove, add, reposition
-  setWindowIDs$: Observable<Action> = this.actions$
-    .ofType(windowActions.ADD_WINDOW, windowActions.REMOVE_WINDOW)
+  @Effect() // add
+  addWindowID$: Observable<Action> = this.actions$
+    .ofType(windowActions.ADD_WINDOW)
     .withLatestFrom(this.store, (action: windowActions.Action, state) => {
-      return { windows: state.windows, action };
+      return { windows: state.windows, windowIds: state.windowsMeta.windowIds, action };
     }).switchMap(data => {
       const windowIds = Object.keys(data.windows);
-      return Observable.of(new windowsMetaActions.SetWindowIdsAction({ ids: windowIds }));
+      const metaWindowIds = data.windowIds;
+      const newWindowIds = [...metaWindowIds, ...windowIds.filter(id => !metaWindowIds.includes(id))]
+
+      return Observable.of(new windowsMetaActions.SetWindowIdsAction({ ids: newWindowIds }));
+    });
+
+  @Effect() // remove
+  removeWindowID$: Observable<Action> = this.actions$
+    .ofType(windowActions.REMOVE_WINDOW)
+    .withLatestFrom(this.store, (action: windowActions.Action, state) => {
+      return { windows: state.windows, windowIds: state.windowsMeta.windowIds, action };
+    }).switchMap(data => {
+      const windowIds = Object.keys(data.windows);
+      const metaWindowIds = data.windowIds;
+      const newWindowIds = metaWindowIds.filter(id => windowIds.includes(id));
+      return Observable.of(new windowsMetaActions.SetWindowIdsAction({ ids: newWindowIds }));
     });
 
   constructor(

src/app/reducers/docs/selectors.ts

@@ -1,6 +1,7 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './docs';
 
-export const getDocsState = (state: PerWindowState) => state.docs;
+export const getDocsState = (state: PerWindowState) => state ? state.docs : { ...initialState };
 export const getShowDocs = createSelector(getDocsState, state => state.showDocs);
 export const getDocsLoading = createSelector(getDocsState, state => state.isLoading);

src/app/reducers/gql-schema/selectors.ts

@@ -1,7 +1,8 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './gql-schema';
 
-export const getSchemaState = (state: PerWindowState) => state.schema;
+export const getSchemaState = (state: PerWindowState) => state ? state.schema : { ...initialState };
 export const getSchema = createSelector(getSchemaState, state => state.schema);
 export const getIntrospection = createSelector(getSchemaState, state => state.introspection);
 export const allowIntrospection = createSelector(getSchemaState, state => state.allowIntrospection);

src/app/reducers/headers/selectors.ts

@@ -1,4 +1,5 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './headers';
 
-export const getHeaders = (state: PerWindowState) => state.headers;
+export const getHeaders = (state: PerWindowState) => state ? state.headers : { ...initialState };

src/app/reducers/layout/selectors.ts

@@ -1,6 +1,7 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './layout';
 
-export const getLayout = (state: PerWindowState) => state.layout;
+export const getLayout = (state: PerWindowState) => state ? state.layout : { ...initialState };
 export const getIsLoading = createSelector(getLayout, layout => layout.isLoading);
 export const getTitle = createSelector(getLayout, layout => layout.title);

src/app/reducers/query/selectors.ts

@@ -1,7 +1,8 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './query';
 
-export const getQueryState = (state: PerWindowState) => state.query;
+export const getQueryState = (state: PerWindowState) => state ? state.query : { ...initialState };
 export const getQueryResult = createSelector(getQueryState, state => state.response);
 export const getResponseStatus = createSelector(getQueryState, state => state.responseStatus);
 export const getResponseTime = createSelector(getQueryState, state => state.responseTime);

src/app/reducers/variables/selectors.ts

@@ -1,4 +1,5 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from '..';
+import { initialState } from './variables';
 
-export const getVariables = (state: PerWindowState) => state.variables.variables;
+export const getVariables = (state: PerWindowState) => state ? state.variables.variables : initialState.variables;

src/app/reducers/windows.ts

@@ -50,7 +50,7 @@ export function windows(reducer: ActionReducer<any>) {
 
                 return newWindowsState;
             case windowsActions.REMOVE_WINDOW:
-                const _windowId = action.windowId;
+                const _windowId = action.payload.windowId;
 
                 if (_state[_windowId]) {
                     delete _state[_windowId];

src/app/services/window.service.ts

@@ -62,7 +62,7 @@ export class WindowService {
             windowKeys.map(key => this.db.removeItemByExactKey(key));
 
             // Dispatch the remove window action
-            return Observable.of(this.store.dispatch(new windowActions.RemoveWindowAction(windowId)));
+            return Observable.of(this.store.dispatch(new windowActions.RemoveWindowAction({ windowId })));
           });
       });
     });