Merge pull request #71 from mofojed/redux-registry

Implement react redux registry

Author: spasovski

packages/redux/package-lock.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "deep-equal": "^2.0.4",
-    "reduce-reducers": "^1.0.1",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
@@ -50,7 +49,8 @@
     "npm-run-all": "^4.1.5",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.6"
+    "ts-jest": "^26.5.6",
+    "typescript": "^4.3.2"
   },
   "peerDependencies": {
     "@deephaven/log": "^0.1.0",

packages/redux/package.json

@@ -1,3 +1,11 @@
+import reducers from './reducers';
+import reducerRegistry from './reducerRegistry';
+
+// TODO #70: Separate all reducers into their respective modules, register from there
+Object.entries(reducers).map(([name, reducer]) =>
+  reducerRegistry.register(name, reducer)
+);
+
 export {
   getActiveTool,
   getClosedPanelsForDashboard,
@@ -63,4 +71,6 @@ export {
   setWorkspaceStorage,
   updateWorkspaceData,
 } from './actions';
+export { default as reducers } from './reducers';
+export { default as reducerRegistry } from './reducerRegistry';
 export { default as store } from './store';

packages/redux/src/index.js

@@ -0,0 +1,28 @@
+import { Reducer, ReducersMapObject } from 'redux';
+
+export type ReducerRegistryListener = (reducers: ReducersMapObject) => void;
+
+/**
+ * A registry for registering reducers. Whenever a new reducer is added,
+ * the reducers should be replaced in the store.
+ *
+ * See this blog post for some notes on redux modules/code splitting
+ * http://nicolasgallagher.com/redux-modules-and-code-splitting/
+ */
+export class ReducerRegistry {
+  reducers = {} as ReducersMapObject;
+
+  listener: ReducerRegistryListener | null = null;
+
+  register(name: string, reducer: Reducer): void {
+    this.reducers = { ...this.reducers, [name]: reducer };
+    this.listener?.(this.reducers);
+  }
+
+  setListener(listener: ReducerRegistryListener): void {
+    this.listener = listener;
+  }
+}
+
+const reducerRegistry = new ReducerRegistry();
+export default reducerRegistry;

packages/redux/src/reducerRegistry.ts

@@ -1,6 +1,3 @@
-import { combineReducers } from 'redux';
-import reduceReducer from 'reduce-reducers';
-
 import activeTool from './activeTool';
 import dashboardClosedPanels from './dashboardClosedPanels';
 import dashboardOpenedPanelMaps from './dashboardOpenedPanelMaps';
@@ -19,8 +16,7 @@ import controllerConfiguration from './controllerConfiguration';
 import draftManager from './draftManager';
 import serverConfigValues from './serverConfigValues';
 
-// Reducers that work on one part of the state
-const childReducers = combineReducers({
+const reducers = {
   activeTool,
   dashboardClosedPanels,
   dashboardOpenedPanelMaps,
@@ -38,9 +34,6 @@ const childReducers = combineReducers({
   controllerConfiguration,
   draftManager,
   serverConfigValues,
-});
-
-// Reducers that work on multiple parts of the state (get the whole state)
-const stateReducers = [];
+};
 
-export default reduceReducer(childReducers, ...stateReducers);
+export default reducers;

packages/redux/src/reducers/index.js

@@ -1,11 +1,17 @@
-import { applyMiddleware, createStore, compose } from 'redux';
+import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
 import rootMiddleware from './middleware';
-import rootReducer from './reducers';
+import reducerRegistry from './reducerRegistry';
 
 /* eslint-disable-next-line no-underscore-dangle */
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-export default createStore(
-  rootReducer,
+const store = createStore(
+  combineReducers(reducerRegistry.reducers),
   composeEnhancers(applyMiddleware(...rootMiddleware))
 );
+
+reducerRegistry.setListener(reducers => {
+  store.replaceReducer(combineReducers(reducers));
+});
+
+export default store;