Add redux-logger.

This automatically logs state changes (in a readable form) to the js
console. We'll probably want to turn this off in production to cut down
on log noise.

client/package-lock.json

@@ -27,12 +27,14 @@
         "react-esri-leaflet": "^1.3.1",
         "react-leaflet": "^3.2.5",
         "react-redux": "^7.2.6",
+        "redux-logger": "^3.0.6",
         "typescript": "~4.1.5"
       },
       "devDependencies": {
         "@trivago/prettier-plugin-sort-imports": "^3.2.0",
         "@types/axios": "^0.14.0",
         "@types/leaflet": "^1.7.9",
+        "@types/redux-logger": "^3.0.9",
         "@types/websocket": "^1.0.5",
         "electron": "^17.1.0",
         "electron-is-dev": "^2.0.0",
@@ -4262,6 +4264,15 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/redux-logger": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.9.tgz",
+      "integrity": "sha512-cwYhVbYNgH01aepeMwhd0ABX6fhVB2rcQ9m80u8Fl50ZODhsZ8RhQArnLTkE7/Zrfq4Sz/taNoF7DQy9pCZSKg==",
+      "dev": true,
+      "dependencies": {
+        "redux": "^4.0.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6944,6 +6955,11 @@
       "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
       "dev": true
     },
+    "node_modules/deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
     "node_modules/deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -15658,6 +15674,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "dependencies": {
+        "deep-diff": "^0.3.5"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
@@ -21934,6 +21958,15 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/redux-logger": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.9.tgz",
+      "integrity": "sha512-cwYhVbYNgH01aepeMwhd0ABX6fhVB2rcQ9m80u8Fl50ZODhsZ8RhQArnLTkE7/Zrfq4Sz/taNoF7DQy9pCZSKg==",
+      "dev": true,
+      "requires": {
+        "redux": "^4.0.0"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -23994,6 +24027,11 @@
       "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
       "dev": true
     },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
     "deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -30414,6 +30452,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "requires": {
+        "deep-diff": "^0.3.5"
+      }
+    },
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",

client/package.json

@@ -23,6 +23,7 @@
     "react-esri-leaflet": "^1.3.1",
     "react-leaflet": "^3.2.5",
     "react-redux": "^7.2.6",
+    "redux-logger": "^3.0.6",
     "typescript": "~4.1.5"
   },
   "scripts": {
@@ -51,6 +52,7 @@
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/axios": "^0.14.0",
     "@types/leaflet": "^1.7.9",
+    "@types/redux-logger": "^3.0.9",
     "@types/websocket": "^1.0.5",
     "electron": "^17.1.0",
     "electron-is-dev": "^2.0.0",

client/src/app/store.ts

@@ -4,6 +4,7 @@ import frontLinesReducer from "../api/frontLinesSlice";
 import supplyRoutesReducer from "../api/supplyRoutesSlice";
 import tgosReducer from "../api/tgosSlice";
 import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
+import logger from "redux-logger";
 
 export const store = configureStore({
   reducer: {
@@ -13,6 +14,8 @@ export const store = configureStore({
     supplyRoutes: supplyRoutesReducer,
     tgos: tgosReducer,
   },
+  // The logger middleware must be last or it won't log actions.
+  middleware: [logger],
 });
 
 export type AppDispatch = typeof store.dispatch;