Change: Use redux toolkit and its default middleware for the store

The redux developers highly recommend to use the redux toolkit nowadays
instead of redux directly. It adds some abstraction and useful tooling
on top of redux. In our case it adds some useful middleware for finding
common redux issues while running in the development mode. In production
mode it only adds redux-thunk. Therefore redux-thunk is not a direct
dependency of GSA anymore.

package.json

@@ -32,6 +32,7 @@
     "node": ">=18.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
     "@sentry/react": "^7.109.0",
     "@visx/axis": "^3.10.1",
     "@visx/gradient": "^3.3.0",
@@ -68,7 +69,6 @@
     "react-router-dom": "^5.2.0",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^3.1.0",
     "styled-components": "^6.1.1",
     "uuid": "^9.0.1",
     "whatwg-fetch": "^3.6.20"

src/web/app.jsx

@@ -53,11 +53,11 @@ initLocale();
 const settings = new GmpSettings(global.localStorage, global.config);
 const gmp = new Gmp(settings);
 
-const store = configureStore(
-  isDefined(settings.enableStoreDebugLog)
+const store = configureStore({
+  debug: isDefined(settings.enableStoreDebugLog)
     ? settings.enableStoreDebugLog
     : settings.logLevel === LOG_LEVEL_DEBUG,
-);
+});
 
 window.gmp = gmp;
 

src/web/store/index.js

@@ -16,23 +16,26 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {createStore, applyMiddleware} from 'redux';
+import {configureStore as reduxConfigureStore} from '@reduxjs/toolkit';
 
-import {thunk} from 'redux-thunk';
-
-import {createLogger} from 'redux-logger';
+import logger from 'redux-logger';
 
 import rootReducer from './reducers';
 
-const configureStore = (debug = false) => {
-  const middlewares = [thunk];
-
-  if (debug) {
-    middlewares.push(createLogger());
-  }
-
-  return createStore(rootReducer, applyMiddleware(...middlewares));
+const configureStore = ({debug = false, testing = false}) => {
+  return reduxConfigureStore({
+    reducer: rootReducer,
+    middleware: getDefaultMiddleware => {
+      const middlewares = getDefaultMiddleware({
+        serializableCheck: false,
+        immutableCheck: !testing,
+      });
+      if (debug) {
+        middlewares.concat(logger);
+      }
+      return middlewares;
+    },
+  });
 };
 
 export default configureStore;
-// vim: set ts=2 sw=2 tw=80:

src/web/utils/testing.jsx

@@ -139,7 +139,7 @@ export const rendererWith = (
   },
 ) => {
   if (store === true) {
-    store = configureStore();
+    store = configureStore({testing: true});
   }
 
   let history;