Remove connected react router and replace createStore with configureStore

package.json

@@ -76,7 +76,6 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-react-app": "^9.1.2",
-    "connected-react-router": "^6.4.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
@@ -122,6 +121,7 @@
     "webpack": "^4.29.6"
   },
   "dependencies": {
+    "@lagunovsky/redux-react-router": "^4.3.0",
     "styled-components": "^5.2.0"
   },
   "resolutions": {

packages/connected-reducer-registry/README.md

@@ -13,7 +13,7 @@ import store from '@onaio/connected-reducer-registry';
 This is a redux store that:
 
 - works with the Reducer Registry i.e. any reducers added to the Reducer registry will be added to the Redux store dynamically
-- is integrated with [connected-react-router](https://github.com/supasate/connected-react-router)
+- is integrated with [@lagunovsky/redux-react-router](https://github.com/lagunovsky/redux-react-router)
 - is integrated with [redux thunk](https://github.com/reduxjs/redux-thunk)
 - includes redux dev tools for easy debugging
 

packages/connected-reducer-registry/dist/index.js

@@ -1,48 +1,47 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = exports.connectReducer = void 0;
 exports.getConnectedStore = getConnectedStore;
-exports["default"] = exports.connectReducer = exports.history = void 0;
-
+exports.history = void 0;
 var _reduxReducerRegistry = _interopRequireWildcard(require("@onaio/redux-reducer-registry"));
-
-var _connectedReactRouter = require("connected-react-router");
-
+var _reduxReactRouter = require("@lagunovsky/redux-react-router");
 var _history = require("history");
-
 var _redux = require("redux");
-
-var _reduxThunk = _interopRequireDefault(require("redux-thunk"));
-
+var _toolkit = require("@reduxjs/toolkit");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var history = (0, _history.createBrowserHistory)();
 exports.history = history;
-
 function getConnectedStore(reducers) {
   var initialState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   Object.keys(reducers).forEach(function (reducerName) {
     _reduxReducerRegistry["default"].register(reducerName, reducers[reducerName]);
   });
-  var reducer = (0, _reduxReducerRegistry.combine)(_reduxReducerRegistry["default"].getReducers(), initialState);
+  var reducer = _reduxReducerRegistry["default"].getReducers();
   var composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || _redux.compose;
-  return (0, _redux.createStore)(reducer, initialState, composeEnhancers((0, _redux.applyMiddleware)(_reduxThunk["default"], (0, _connectedReactRouter.routerMiddleware)(history))));
+  var routerMiddleware = (0, _reduxReactRouter.createRouterMiddleware)(history);
+  return (0, _toolkit.configureStore)({
+    reducer: reducer,
+    middleware: function middleware(getDefaultMiddleware) {
+      return getDefaultMiddleware().prepend(routerMiddleware);
+    },
+    devTools: process.env.NODE_ENV !== 'production',
+    preloadedState: initialState,
+    enhancers: [composeEnhancers()]
+  });
 }
-
-var connectReducer = (0, _connectedReactRouter.connectRouter)(history);
+var connectReducer = (0, _reduxReactRouter.createRouterReducer)(history);
 exports.connectReducer = connectReducer;
 var defaultReducers = {
   router: connectReducer
 };
 var store = getConnectedStore(defaultReducers);
-
 _reduxReducerRegistry["default"].setChangeListener(function (reducers) {
   store.replaceReducer((0, _reduxReducerRegistry.combine)(reducers));
 });
-
 var _default = store;
 exports["default"] = _default;

packages/connected-reducer-registry/package.json

@@ -30,11 +30,11 @@
   "author": "Ona Engineering",
   "license": "Apache-2.0",
   "dependencies": {
-    "@onaio/redux-reducer-registry": "^0.0.9"
+    "@reduxjs/toolkit": "^1.9.5"
   },
   "peerDependencies": {
+    "@lagunovsky/redux-react-router": "^4.3.0",
     "@types/history": "^4.7.2",
-    "connected-react-router": "^6.4.0",
     "history": "^4.9.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"

packages/connected-reducer-registry/src/index.ts

@@ -1,5 +1,6 @@
+import { createRouterMiddleware, createRouterReducer } from '@lagunovsky/redux-react-router';
 import reducerRegistry, { combine, Registry } from '@onaio/redux-reducer-registry';
-import { connectRouter, routerMiddleware } from 'connected-react-router';
+import { configureStore } from '@reduxjs/toolkit';
 import { createBrowserHistory } from 'history';
 import { applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
@@ -30,21 +31,32 @@ export function getConnectedStore(reducers: Registry, initialState: State = {})
   });
 
   /** Combine reducers */
-  const reducer = combine(reducerRegistry.getReducers(), initialState);
+  // const reducer = combine(reducerRegistry.getReducers(), initialState);
+  const reducer = reducerRegistry.getReducers();
 
   /** Add redux dev tools to enhancers */
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
   /** Create the store */
-  return createStore(
+  // return createStore(
+  //   reducer,
+  //   initialState,
+  //   composeEnhancers(applyMiddleware(thunk, createRouterMiddleware(history)))
+  // );
+
+  const routerMiddleware = createRouterMiddleware(history);
+
+  return configureStore({
     reducer,
-    initialState,
-    composeEnhancers(applyMiddleware(thunk, routerMiddleware(history)))
-  );
+    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(routerMiddleware),
+    devTools: process.env.NODE_ENV !== 'production',
+    preloadedState: initialState,
+    enhancers: [composeEnhancers()]
+  });
 }
 
 /** Router reducer */
-export const connectReducer = connectRouter(history);
+export const connectReducer = createRouterReducer(history);
 
 /** Initial reducers in the reducer registry */
 const defaultReducers: Registry = {

packages/connected-reducer-registry/src/tests/index.test.ts

@@ -18,13 +18,12 @@ describe('store', () => {
     expect(typeof store.replaceReducer).toEqual('function');
   });
 
-  it('should include connectReducer by default', () => {
+  it('should include createRouterReducer by default', () => {
     expect(store.getState().router).toEqual({
       action: 'POP',
       location: {
         hash: '',
         pathname: '/',
-        query: {},
         search: '',
         state: undefined
       }

packages/reducer-registry/dist/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,29 +10,28 @@ Object.defineProperty(exports, "Registry", {
     return _registry.Registry;
   }
 });
-Object.defineProperty(exports, "store", {
-  enumerable: true,
-  get: function get() {
-    return _store["default"];
-  }
-});
 Object.defineProperty(exports, "combine", {
   enumerable: true,
   get: function get() {
     return _store.combine;
   }
 });
+exports["default"] = void 0;
 Object.defineProperty(exports, "getStore", {
   enumerable: true,
   get: function get() {
     return _store.getStore;
   }
 });
-exports["default"] = void 0;
-
+Object.defineProperty(exports, "store", {
+  enumerable: true,
+  get: function get() {
+    return _store["default"];
+  }
+});
 var _registry = _interopRequireWildcard(require("./registry"));
-
 var _store = _interopRequireWildcard(require("./store"));
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = _registry["default"];
 exports["default"] = _default;

packages/reducer-registry/dist/registry.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ReducerRegistry = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ReducerRegistry = function () {
   function ReducerRegistry() {
     (0, _classCallCheck2["default"])(this, ReducerRegistry);
@@ -25,7 +18,6 @@ var ReducerRegistry = function () {
     this.emitChange = null;
     this.reducers = {};
   }
-
   (0, _createClass2["default"])(ReducerRegistry, [{
     key: "getReducers",
     value: function getReducers() {
@@ -34,8 +26,7 @@ var ReducerRegistry = function () {
   }, {
     key: "register",
     value: function register(name, reducer) {
-      this.reducers = _objectSpread({}, this.reducers, (0, _defineProperty2["default"])({}, name, reducer));
-
+      this.reducers = _objectSpread(_objectSpread({}, this.reducers), {}, (0, _defineProperty2["default"])({}, name, reducer));
       if (this.emitChange !== null) {
         this.emitChange(this.getReducers());
       }
@@ -48,7 +39,6 @@ var ReducerRegistry = function () {
   }]);
   return ReducerRegistry;
 }();
-
 exports.ReducerRegistry = ReducerRegistry;
 var reducerRegistry = new ReducerRegistry();
 var _default = reducerRegistry;

packages/reducer-registry/dist/store.js

@@ -1,18 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.combine = combine;
-exports.getStore = getStore;
 exports["default"] = void 0;
-
+exports.getStore = getStore;
 var _redux = require("redux");
-
 var _registry = _interopRequireDefault(require("./registry"));
-
+var _toolkit = require("@reduxjs/toolkit");
 function combine(reducers) {
   var initialState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   Object.keys(initialState).forEach(function (item) {
@@ -23,24 +20,16 @@ function combine(reducers) {
   });
   return (0, _redux.combineReducers)(reducers);
 }
-
 function getStore(reducers) {
   var initialState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  if (Object.keys(reducers).length > 0) {
-    return (0, _redux.createStore)(combine(reducers, initialState));
-  }
-
-  return (0, _redux.createStore)(function () {
-    return initialState;
+  return (0, _toolkit.configureStore)({
+    reducer: combine(reducers, initialState),
+    preloadedState: initialState
   });
 }
-
 var store = getStore(_registry["default"].getReducers());
-
 _registry["default"].setChangeListener(function (reducers) {
   store.replaceReducer(combine(reducers));
 });
-
 var _default = store;
 exports["default"] = _default;

packages/reducer-registry/src/store.ts

@@ -1,4 +1,5 @@
 /** Store module */
+import { configureStore } from '@reduxjs/toolkit';
 import { combineReducers, createStore, Reducer } from 'redux';
 import reducerRegistry, { Registry } from './registry';
 
@@ -19,11 +20,17 @@ export function combine(reducers: Registry, initialState: State = {}) {
 /** Function that returns a Redux store given a list of Reducers and initial
  * state
  */
+// export function getStore(reducers: Registry, initialState: State = {}) {
+//   if (Object.keys(reducers).length > 0) {
+//     return createStore(combine(reducers, initialState));
+//   }
+//   return createStore(() => initialState);
+// }
 export function getStore(reducers: Registry, initialState: State = {}) {
-  if (Object.keys(reducers).length > 0) {
-    return createStore(combine(reducers, initialState));
-  }
-  return createStore(() => initialState);
+  return configureStore({
+    reducer: combine(reducers, initialState),
+    preloadedState: initialState
+  });
 }
 
 /** Ready-to-use default store made from an empty Reducer registry */