Start using modern Redux

package.json

@@ -48,6 +48,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.21.0",
     "@hot-loader/react-dom": "^16.13.0",
+    "@reduxjs/toolkit": "^1.9.7",
     "argparse": "^1.0.10",
     "babel-loader": "^8.0.4",
     "babel-plugin-lodash": "^3.3.4",
@@ -108,8 +109,6 @@
     "react-tooltip": "^4.2.10",
     "react-transition-group": "^1.2.1",
     "react-virtualized": "^9.22.3",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.5",
     "style-loader": "^0.13.2",
     "styled-components": "^4.0.3",

src/index.js

@@ -9,7 +9,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 /* A U S P I C E   I M P O R T S */
-import configureStore from "./store";
+import store from "./store";
 import { initialiseGoogleAnalyticsIfRequired } from "./util/googleAnalytics";
 import Root from "./root";
 /* I N T E R N A T I O N A L I Z A T I O N */
@@ -26,8 +26,6 @@ import "./css/select.css";
 /* FONTS */
 import 'typeface-lato';
 
-const store = configureStore();
-
 /* set up non-redux state storage for the animation - use this conservitavely! */
 if (!window.NEXTSTRAIN) {window.NEXTSTRAIN = {};}
 

src/store/index.js

@@ -1,30 +1,34 @@
-import { createStore, applyMiddleware, compose } from "redux";
-import thunk from "redux-thunk";
+import { configureStore } from '@reduxjs/toolkit';
 import { changeURLMiddleware } from "../middleware/changeURL";
 import rootReducer from "../reducers";
-import { loggingMiddleware } from "../middleware/logActions"; // eslint-disable-line @typescript-eslint/no-unused-vars
+// import { loggingMiddleware } from "../middleware/logActions";
 import { keepScatterplotStateInSync } from "../middleware/scatterplot";
 
-const configureStore = (initialState) => {
-  const middleware = [
-    thunk,
-    keepScatterplotStateInSync,
-    changeURLMiddleware,
-    // loggingMiddleware
-  ];
-  const composedEnhancers = compose(
-    applyMiddleware(...middleware),
-    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f
-  );
-  const store = createStore(rootReducer, initialState, composedEnhancers);
-  if (process.env.NODE_ENV !== 'production' && module.hot) {
-    // console.log("hot reducer reload");
-    module.hot.accept('../reducers', () => {
-      const nextRootReducer = require('../reducers/index'); 
-      store.replaceReducer(nextRootReducer);
-    });
-  }
-  return store;
-};
+const middleware = [
+  keepScatterplotStateInSync,
+  changeURLMiddleware,
+  // loggingMiddleware
+];
 
-export default configureStore;
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      // TODO: Go through reducers and see why the state is not immutable nor serializable.
+      // These were not checked prior to the adoption of Redux Toolkit, and were not
+      // investigated to minimize conversion efforts.
+      immutableCheck: false,
+      serializableCheck: false
+    }).concat(middleware),
+  devTools: process.env.NODE_ENV !== 'production',
+})
+
+if (process.env.NODE_ENV !== 'production' && module.hot) {
+  // console.log("hot reducer reload");
+  module.hot.accept('../reducers', () => {
+    const nextRootReducer = require('../reducers/index'); 
+    store.replaceReducer(nextRootReducer);
+  });
+}
+
+export default store;