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",
@@ -125,6 +124,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.3",
     "@types/node": "^18.15.11",
+    "@types/webpack-env": "^1.18.2",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "chai": "^4.1.2",

src/components/controls/measurementsOptions.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
+import { useAppDispatch } from "../../hooks";
 import { isEqual } from "lodash";
 import { changeMeasurementsCollection } from "../../actions/measurements";
 import {
@@ -30,7 +31,7 @@ const collectionOptionsSelector = (collections) => {
 };
 
 const MeasurementsOptions = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const collection = useSelector((state) => state.measurements.collectionToDisplay);
   const collectionOptions = useSelector((state) => collectionOptionsSelector(state.measurements.collections), isEqual);
   const groupBy = useSelector((state) => state.controls.measurementsGroupBy);

src/components/controls/panel-toggles.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useAppDispatch } from "../../hooks";
+import { useTranslation } from 'react-i18next';
+
+import Toggle from "./toggle";
+import { togglePanelDisplay } from "../../actions/panelDisplay";
+import { RootState } from "../../store";
+
+export default function PanelToggles() {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+  const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
+
+  const panels = panelsAvailable.slice();
+  if (showTreeToo && panels.indexOf("map") !== -1) {
+    panels.splice(panels.indexOf("map"), 1);
+  }
+  return <>
+    {panels.map((n) => (
+      <Toggle
+        key={n}
+        display
+        on={panelsToDisplay.indexOf(n) !== -1}
+        callback={() => dispatch(togglePanelDisplay(n))}
+        label={t("sidebar:Show " + n)}
+        style={{ paddingBottom: "10px" }}
+      />
+    ))}
+  </>
+}

src/components/narrativeEditor/examineNarrative.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from "../../hooks";
 import { getDatasetNamesFromUrl } from "../../actions/loadData";
 import { CLEAN_START } from "../../actions/types";
 import { createStateFromQueryOrJSONs } from "../../actions/recomputeReduxState";
@@ -159,7 +159,7 @@ const NarrativeSummary = ({summary, datasetResponses, showNarrative}) => {
 };
 
 const ExamineNarrative = ({narrative, datasetResponses, setDisplayNarrative}) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const el = useRef(null);
   useEffect(() => {
     /* when a narrative is loaded then we want to focus on <ExamineNarrative> however

src/components/narrativeEditor/useDatasetFetch.js

@@ -1,5 +1,5 @@
 import {useEffect, useReducer, useRef} from "react";
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from "../../hooks";
 import { CACHE_JSONS } from "../../actions/types";
 import { FetchError } from "../../util/exceptions";
 
@@ -14,7 +14,7 @@ import { FetchError } from "../../util/exceptions";
  */
 
 export function useDatasetFetch(datasets) {
-  const dispatchRedux = useDispatch();
+  const dispatchRedux = useAppDispatch;
   const [datasetResponses, dispatchDatasetResponses] = useReducer(
     (state, action) => {
       if (action.reset) return {};

src/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

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 = {};}