Clean up store initialization (#1409)

Author: Marc-Andre-Rivet

dash-renderer/src/AppProvider.react.tsx

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useState} from 'react';
 import {Provider} from 'react-redux';
 
-import initializeStore from './store';
+import Store from './store';
 import AppContainer from './AppContainer.react';
 
-const store = initializeStore();
-
 const AppProvider = ({hooks}: any) => {
+    const [{store}] = useState(() => new Store());
+
     return (
         <Provider store={store}>
             <AppContainer hooks={hooks} />

dash-renderer/src/store.ts

@@ -28,71 +28,80 @@ export interface IStoreState {
     [key: string]: any;
 }
 
-let store: Store<IStoreState>;
-const storeObserver = new StoreObserver<IStoreState>();
-
-const setObservers = once(() => {
-    const observe = storeObserver.observe;
-
-    observe(documentTitle);
-    observe(isLoading);
-    observe(loadingMap);
-    observe(requestedCallbacks);
-    observe(prioritizedCallbacks);
-    observe(executingCallbacks);
-    observe(executedCallbacks);
-    observe(storedCallbacks);
-});
-
-function createAppStore(reducer: any, middleware: any) {
-    store = createStore(reducer, middleware);
-    storeObserver.setStore(store);
-    setObservers();
-}
+export default class RendererStore {
+    constructor() {
+        this.__store = this.initializeStore();
+    }
 
-/**
- * Initialize a Redux store with thunk, plus logging (only in development mode) middleware
- *
- * @param {bool} reset: discard any previous store
- *
- * @returns {Store<GenericStoreEnhancer>}
- *  An initialized redux store with middleware and possible hot reloading of reducers
- */
-const initializeStore = (reset?: boolean): Store<IStoreState> => {
-    if (store && !reset) {
-        return store;
+    private __store: Store<IStoreState>;
+    public get store(): Store<IStoreState> {
+        return this.__store;
     }
 
-    const reducer = createReducer();
+    private readonly storeObserver = new StoreObserver<IStoreState>();
 
-    // eslint-disable-next-line no-process-env
-    if (process.env.NODE_ENV === 'production') {
-        createAppStore(reducer, applyMiddleware(thunk));
-    } else {
-        // only attach logger to middleware in non-production mode
-        const reduxDTEC = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-        if (reduxDTEC) {
-            createAppStore(reducer, reduxDTEC(applyMiddleware(thunk)));
-        } else {
-            createAppStore(reducer, applyMiddleware(thunk));
+    private setObservers = once(() => {
+        const observe = this.storeObserver.observe;
+
+        observe(documentTitle);
+        observe(isLoading);
+        observe(loadingMap);
+        observe(requestedCallbacks);
+        observe(prioritizedCallbacks);
+        observe(executingCallbacks);
+        observe(executedCallbacks);
+        observe(storedCallbacks);
+    });
+
+    private createAppStore = (reducer: any, middleware: any) => {
+        this.__store = createStore(reducer, middleware);
+        this.storeObserver.setStore(this.__store);
+        this.setObservers();
+    };
+
+    /**
+     * Initialize a Redux store with thunk, plus logging (only in development mode) middleware
+     *
+     * @param {bool} reset: discard any previous store
+     *
+     * @returns {Store<GenericStoreEnhancer>}
+     *  An initialized redux store with middleware and possible hot reloading of reducers
+     */
+    initializeStore = (reset?: boolean): Store<IStoreState> => {
+        if (this.__store && !reset) {
+            return this.__store;
         }
-    }
 
-    if (!reset) {
-        // TODO - Protect this under a debug mode?
-        (window as any).store = store;
-    }
+        const reducer = createReducer();
 
-    if ((module as any).hot) {
-        // Enable hot module replacement for reducers
-        (module as any).hot.accept('./reducers/reducer', () => {
-            const nextRootReducer = require('./reducers/reducer').createReducer();
+        // eslint-disable-next-line no-process-env
+        if (process.env.NODE_ENV === 'production') {
+            this.createAppStore(reducer, applyMiddleware(thunk));
+        } else {
+            // only attach logger to middleware in non-production mode
+            const reduxDTEC = (window as any)
+                .__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+            if (reduxDTEC) {
+                this.createAppStore(reducer, reduxDTEC(applyMiddleware(thunk)));
+            } else {
+                this.createAppStore(reducer, applyMiddleware(thunk));
+            }
+        }
 
-            store.replaceReducer(nextRootReducer);
-        });
-    }
+        if (!reset) {
+            // TODO - Protect this under a debug mode?
+            (window as any).store = this.__store;
+        }
 
-    return store;
-};
+        if ((module as any).hot) {
+            // Enable hot module replacement for reducers
+            (module as any).hot.accept('./reducers/reducer', () => {
+                const nextRootReducer = require('./reducers/reducer').createReducer();
 
-export default initializeStore;
+                this.__store.replaceReducer(nextRootReducer);
+            });
+        }
+
+        return this.__store;
+    };
+}