Shift store init to own directory

src/App.js

@@ -1,8 +1,6 @@
 import './config';
 
-import { OidcProvider, reducer as oidcReducer } from 'redux-oidc';
 import React, { Component } from 'react';
-import { combineReducers, createStore } from 'redux';
 import {
   getDefaultToolbarButtons,
   getUserManagerForOpenIdConnectClient,
@@ -17,32 +15,20 @@ import OHIFDicomMicroscopyExtension from 'ohif-dicom-microscopy-extension';
 import OHIFDicomPDFExtension from 'ohif-dicom-pdf-extension';
 import OHIFStandaloneViewer from './OHIFStandaloneViewer';
 import OHIFVTKExtension from '@ohif/extension-vtk';
+import { OidcProvider } from 'redux-oidc';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import WhiteLabellingContext from './WhiteLabellingContext';
 import setupTools from './setupTools';
-import ui from './redux/ui.js';
+import store from './store';
 
 const { ExtensionManager } = OHIF.extensions;
-const { reducers, localStorage } = OHIF.redux;
-
-reducers.ui = ui;
-reducers.oidc = oidcReducer;
-
-const combined = combineReducers(reducers);
-const store = createStore(combined, localStorage.loadState());
-
-store.subscribe(() => {
-  localStorage.saveState({
-    preferences: store.getState().preferences,
-  });
-});
 
 setupTools(store);
 
 const children = {
-  viewport: [<ConnectedToolContextMenu />],
+  viewport: [<ConnectedToolContextMenu key="tool-context" />],
 };
 
 /** TODO: extensions should be passed in as prop as soon as we have the extensions as separate packages and then registered by ExtensionsManager */

src/connectedComponents/ConnectedHeader.js

@@ -1,6 +1,6 @@
-import { connect } from 'react-redux';
 import Header from '../components/Header/Header.js';
-import { setUserPreferencesModalOpen } from '../redux/actions.js';
+import { connect } from 'react-redux';
+import { setUserPreferencesModalOpen } from '../store/layout/actions.js';
 
 const mapStateToProps = state => {
   return {

src/connectedComponents/ConnectedToolbarRow.js

@@ -1,6 +1,10 @@
-import { connect } from 'react-redux';
+import {
+  setLeftSidebarOpen,
+  setRightSidebarOpen,
+} from './../store/layout/actions.js';
+
 import ToolbarRow from './ToolbarRow';
-import { setLeftSidebarOpen, setRightSidebarOpen } from '../redux/actions.js';
+import { connect } from 'react-redux';
 
 const defaultPlugin = 'cornerstone';
 

src/connectedComponents/ConnectedUserPreferencesModal.js

@@ -1,8 +1,8 @@
-import { connect } from 'react-redux';
-import { UserPreferencesModal } from 'react-viewerbase';
 import OHIF from 'ohif-core';
-import { setUserPreferencesModalOpen } from '../redux/actions.js';
+import { UserPreferencesModal } from 'react-viewerbase';
 import cloneDeep from 'lodash.clonedeep';
+import { connect } from 'react-redux';
+import { setUserPreferencesModalOpen } from './../store/layout/actions.js';
 
 const { setUserPreferences } = OHIF.redux.actions;
 

src/store/index.js

@@ -0,0 +1,25 @@
+import { combineReducers, createStore } from 'redux';
+
+import layoutReducers from './layout/reducers.js';
+import { reducer as oidcReducer } from 'redux-oidc';
+import { redux } from 'ohif-core';
+
+// Combine our ohif-core, ui, and oidc reducers
+// Set init data, using values found in localStorage
+const { reducers, localStorage } = redux;
+
+reducers.ui = layoutReducers;
+reducers.oidc = oidcReducer;
+
+const combined = combineReducers(reducers);
+const store = createStore(combined, localStorage.loadState());
+
+// When the store's preferences change,
+// Update our cached preferences in localStorage
+store.subscribe(() => {
+  localStorage.saveState({
+    preferences: store.getState().preferences,
+  });
+});
+
+export default store;

src/store/layout/reducers.js

@@ -16,11 +16,12 @@ const ui = (state = defaultState, action) => {
       return Object.assign({}, state, {
         userPreferencesModalOpen: action.state,
       });
-    case 'SET_LABELLING_FLOW_DATA':
+    case 'SET_LABELLING_FLOW_DATA': {
       const labelling = Object.assign({}, action.labellingFlowData);
 
       return Object.assign({}, state, { labelling });
-    case 'SET_TOOL_CONTEXT_MENU_DATA':
+    }
+    case 'SET_TOOL_CONTEXT_MENU_DATA': {
       const contextMenu = Object.assign({}, state.contextMenu);
 
       contextMenu[action.viewportIndex] = Object.assign(
@@ -29,6 +30,7 @@ const ui = (state = defaultState, action) => {
       );
 
       return Object.assign({}, state, { contextMenu });
+    }
     case 'RESET_LABELLING_AND_CONTEXT_MENU':
       return Object.assign({}, state, {
         labelling: defaultState.labelling,