upgraded to redux 9 and redux toolkit 2

arttu76 · Dec 4, 2023 · 0a00a8a · 0a00a8a
1 parent 7e304b7
commit 0a00a8a
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,29 +34,29 @@
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.0.0",
     "material-symbols": "^0.14.1",
     "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.0.0",
     "react-tooltip": "^5.24.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.10",
     "@types/ramda": "^0.29.9",
-    "@types/react": "^18.2.38",
+    "@types/react": "^18.2.41",
     "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "jest": "^29.7.0",
     "sass": "^1.69.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.2",
-    "vite": "^5.0.2"
+    "vite": "^5.0.5"
   }
 }
diff --git a/src/store/highlightAutoDisablerMiddleware.ts b/src/store/highlightAutoDisablerMiddleware.ts
@@ -1,11 +1,17 @@
-import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
+import { Middleware, PayloadAction } from '@reduxjs/toolkit';
 import { HighlightType } from '../types';
+import { RootState } from './store';
 import { setHighlight } from './toolsSlice';
 
-const highlightAutoDisablerMiddleware = (storeApi: MiddlewareAPI<Dispatch<AnyAction>>) => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
+export const highlightAutoDisablerMiddleware: Middleware<
+    {},
+    RootState
+> = storeApi => next => action => {
+
+    const highlightAction = action as PayloadAction<HighlightType>;
     if (
-        action.type === setHighlight.type
-        && action.payload !== HighlightType.none
+        highlightAction.type === setHighlight.type
+        && highlightAction.payload !== HighlightType.none
     ) {
         setTimeout(
             () => storeApi.dispatch(setHighlight(HighlightType.none)),
@@ -14,5 +20,3 @@ const highlightAutoDisablerMiddleware = (storeApi: MiddlewareAPI<Dispatch<AnyAct
     }
     return next(action);
 };
-
-export default highlightAutoDisablerMiddleware;
diff --git a/src/store/housekeepingSlice.ts b/src/store/housekeepingSlice.ts
@@ -3,11 +3,11 @@ import {
     PayloadAction,
     createSlice
 } from "@reduxjs/toolkit";
-import { Nullable } from "../types";
+import { HousekeepingSliceState, Nullable } from "../types";
 
-const initialState = {
+const initialState: HousekeepingSliceState = {
     repaint: 0,
-    error: null as string | null
+    error: null
 }
 
 const housekeepingSlice = createSlice({

diff --git a/src/store/localStorageMiddleware.ts b/src/store/localStorageMiddleware.ts
@@ -1,8 +1,8 @@
-import { AnyAction, Dispatch } from '@reduxjs/toolkit';
+import { Action, Middleware } from '@reduxjs/toolkit';
 import { saveStateImageMaskPixelAttributeDataToLocalStorage } from "../utils/exportImport";
 import { debounce } from "../utils/utils";
 import { setError } from "./housekeepingSlice";
-import store from "./store";
+import store, { RootState } from "./store";
 
 
 const updateLocalStorage = () => {
@@ -17,17 +17,18 @@ const updateLocalStorage = () => {
     ) {
         store.dispatch(setError(error));
     }
-
 }
 
 const updateLocalStorageDebounced = debounce(() => updateLocalStorage(), 100);
 
-const localStorageMiddleware = () => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
+export const localStorageMiddleware: Middleware<
+    {},
+    RootState
+> = _ => next => action => {
 
-    if (!action.type.startsWith('housekeeping/')) {
+    if (!(action as Action).type.startsWith('housekeeping/')) {
         updateLocalStorageDebounced();
     }
+
     return next(action);
 };
-
-export default localStorageMiddleware;
diff --git a/src/store/store.ts b/src/store/store.ts
@@ -1,6 +1,4 @@
-import { configureStore } from "@reduxjs/toolkit";
-
-import localStorageMiddleware from "./localStorageMiddleware";
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 import housekeeping from "./housekeepingSlice";
 import layers from "./layersSlice";
@@ -10,18 +8,21 @@ import { repaint as repaintAction } from './housekeepingSlice';
 
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { restoreStateImageMaskPixelAttributeDataFromLocalStorage } from "../utils/exportImport";
-import highlightAutoDisablerMiddleware from "./highlightAutoDisablerMiddleware";
-import windowPropertyMiddleware from "./windowPropertyMiddleware";
+import { highlightAutoDisablerMiddleware } from "./highlightAutoDisablerMiddleware";
+import { localStorageMiddleware } from "./localStorageMiddleware";
+import { windowPropertyMiddleware } from "./windowPropertyMiddleware";
 
 const preloadedState = restoreStateImageMaskPixelAttributeDataFromLocalStorage();
 
+const rootReducer = combineReducers({
+    housekeeping,
+    tools,
+    layers
+});
+
 const store = configureStore({
     preloadedState,
-    reducer: {
-        housekeeping,
-        tools,
-        layers
-    },
+    reducer: rootReducer,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware({
         serializableCheck: false,
         immutableCheck: false,
@@ -31,7 +32,7 @@ const store = configureStore({
         .concat(highlightAutoDisablerMiddleware)
 });
 
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof rootReducer>
 export type AppDispatch = typeof store.dispatch
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`

diff --git a/src/store/windowPropertyMiddleware.ts b/src/store/windowPropertyMiddleware.ts
@@ -1,4 +1,4 @@
-import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
+import { Dispatch, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 import * as R from "ramda";
 import { Color, DitheringErrorBuffer, Keys, Layer, Nullable, PartialRgbImage, PixelationSource, Rgb, ToolType } from "../types";
 import { edgeEnhance, gaussianBlur, getColorAdjusted, getInverted, sharpen } from "../utils/colors";
@@ -7,6 +7,7 @@ import { isMaskSet } from "../utils/maskManager";
 import { applyRange2DExclusive, getInitialized2DArray, getSourceRgb, getWindow, rangeExclusive } from "../utils/utils";
 import { repaint } from "./housekeepingSlice";
 import {
+    LayerAction,
     addLayerPattern,
     duplicateLayer,
     preserveLayerAspectRatio,
@@ -43,7 +44,7 @@ import {
     showHideLayer,
     updateLayerPattern
 } from "./layersSlice";
-import store from "./store";
+import store, { RootState } from "./store";
 import { setTool } from './toolsSlice';
 
 const updateAdjustedPixelsIfRequired = () => {
@@ -200,8 +201,8 @@ const updateSpectrumPixelsAndAttributesIfRequired = () => {
 }
 
 const doForPayloadOrAllLayers = (
-    storeApi: MiddlewareAPI<Dispatch<AnyAction>>,
-    action: AnyAction,
+    storeApi: MiddlewareAPI<Dispatch<LayerAction>>,
+    action: LayerAction,
     operation: (layer: Layer) => {}
 ) => {
     if (action.payload.layer) {
@@ -211,12 +212,16 @@ const doForPayloadOrAllLayers = (
     }
 }
 
-const repaintScreenMiddleware = (storeApi: MiddlewareAPI<Dispatch<AnyAction>>) => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
+export const windowPropertyMiddleware: Middleware<
+    {},
+    RootState
+> = storeApi => next => action => {
 
+    const layerAction = action as LayerAction;
     const originalActionResult = next(action);
 
     // do source pixels have to be updated?
-    if ([
+    if (([
         showHideLayer.type,
         setLayerSrcImage.type,
         setLayerX.type,
@@ -240,29 +245,29 @@ const repaintScreenMiddleware = (storeApi: MiddlewareAPI<Dispatch<AnyAction>>) =
         setLayerShadows.type,
         setLayerMidtones.type,
         setLayerHighlights.type
-    ].includes(action.type)) {
+    ] as string[]).includes(layerAction.type)) {
         doForPayloadOrAllLayers(
             storeApi,
-            action,
+            layerAction,
             (layer: Layer) => storeApi.dispatch(setLayerRequireAdjustedPixelsRefresh({ layer, required: true }))
         );
     }
 
-    if ([
+    if (([
         duplicateLayer.type,
         addLayerPattern.type,
         updateLayerPattern.type,
         removeLayerPattern.type
-    ].includes(action.type)) {
+    ] as string[]).includes(layerAction.type)) {
         doForPayloadOrAllLayers(
             storeApi,
-            action,
+            layerAction,
             (layer: Layer) => storeApi.dispatch(setLayerRequirePatternCacheRefresh({ layer, required: true }))
         );
     }
 
     // do spectrum pixels have to be updated?
-    if ([
+    if (([
         setTool.type,
         setLayerPixelate.type,
         setLayerPixelateSource.type,
@@ -272,26 +277,24 @@ const repaintScreenMiddleware = (storeApi: MiddlewareAPI<Dispatch<AnyAction>>) =
         addLayerPattern.type,
         updateLayerPattern.type,
         removeLayerPattern.type,
-    ].includes(action.type)) {
+    ] as string[]).includes(layerAction.type)) {
         doForPayloadOrAllLayers(
             storeApi,
-            action,
+            layerAction,
             (layer: Layer) => storeApi.dispatch(setLayerRequireSpectrumPixelsRefresh({ layer, required: true }))
         );
     }
 
-    if (![
+    if (!([
         repaint.type,
         setLayerRequirePatternCacheRefresh.type,
         setLayerRequireAdjustedPixelsRefresh.type,
         setLayerRequireSpectrumPixelsRefresh.type
-    ].includes(action.type)) {
+    ] as string[]).includes(layerAction.type)) {
         updateAdjustedPixelsIfRequired();
         updatePatternCacheIfRequired();
         updateSpectrumPixelsAndAttributesIfRequired();
     }
 
     return originalActionResult;
 };
-
-export default repaintScreenMiddleware;
diff --git a/src/types.ts b/src/types.ts
@@ -236,7 +236,13 @@ export interface ToolsSliceState {
     highlight: HighlightType;
 }
 
+export interface HousekeepingSliceState {
+    repaint: number;
+    error: string | null;
+}
+
 export interface State {
+    housekeeping: HousekeepingSliceState;
     tools: ToolsSliceState;
     layers: LayersSliceState;
 }