fix(ui): do not use state => state as an input selector

This is a no-no, whoops!

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -1,7 +1,6 @@
 import { Box, chakra, Flex } from '@chakra-ui/react';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import useCanvasDragMove from 'features/canvas/hooks/useCanvasDragMove';
 import useCanvasHotkeys from 'features/canvas/hooks/useCanvasHotkeys';
@@ -17,7 +16,10 @@ import {
   $isTransformingBoundingBox,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { canvasResized } from 'features/canvas/store/canvasSlice';
+import {
+  canvasResized,
+  selectCanvasSlice,
+} from 'features/canvas/store/canvasSlice';
 import {
   setCanvasBaseLayer,
   setCanvasStage,
@@ -41,8 +43,8 @@ import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
 import IAICanvasToolPreview from './IAICanvasToolPreview';
 
 const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
+  [selectCanvasSlice, isStagingSelector],
+  (canvas, isStaging) => {
     const {
       isMaskEnabled,
       stageScale,

invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx

@@ -1,10 +1,10 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { memo } from 'react';
 import { Group, Rect } from 'react-konva';
 
-const selector = createMemoizedSelector(stateSelector, ({ canvas }) => {
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   const {
     boundingBoxCoordinates,
     boundingBoxDimensions,

invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx

@@ -1,13 +1,13 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import type { ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { Group, Line as KonvaLine } from 'react-konva';
 import { getArbitraryBaseColor } from 'theme/colors';
 
-const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
+const selector = createMemoizedSelector([selectCanvasSlice], (canvas) => {
   const { stageScale, stageCoordinates, stageDimensions } = canvas;
   return { stageScale, stageCoordinates, stageDimensions };
 });

invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -2,14 +2,15 @@ import {
   createLruSelector,
   createMemoizedSelector,
 } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { memo, useEffect, useState } from 'react';
 import { Image as KonvaImage } from 'react-konva';
 
 const progressImageSelector = createLruSelector(
-  [stateSelector],
-  ({ system, canvas }) => {
+  [selectSystemSlice, selectCanvasSlice],
+  (system, canvas) => {
     const { denoiseProgress } = system;
     const { batchIds } = canvas;
 
@@ -20,8 +21,8 @@ const progressImageSelector = createLruSelector(
 );
 
 const boundingBoxSelector = createMemoizedSelector(
-  [stateSelector],
-  ({ canvas }) => canvas.layerState.stagingArea.boundingBox
+  [selectCanvasSlice],
+  (canvas) => canvas.layerState.stagingArea.boundingBox
 );
 
 const IAICanvasIntermediateImage = () => {

invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx

@@ -1,6 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import type Konva from 'konva';
 import type { RectConfig } from 'konva/lib/shapes/Rect';
@@ -9,8 +9,8 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Rect } from 'react-konva';
 
 export const canvasMaskCompositerSelector = createMemoizedSelector(
-  stateSelector,
-  ({ canvas }) => {
+  selectCanvasSlice,
+  (canvas) => {
     const { maskColor, stageCoordinates, stageDimensions, stageScale } = canvas;
 
     return {

invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx

@@ -1,18 +1,9 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
 import type { GroupConfig } from 'konva/lib/Group';
 import { memo } from 'react';
 import { Group, Line } from 'react-konva';
 
-export const canvasLinesSelector = createMemoizedSelector(
-  [stateSelector],
-  ({ canvas }) => {
-    return canvas.layerState.objects.filter(isCanvasMaskLine);
-  }
-);
-
 type InpaintingCanvasLinesProps = GroupConfig;
 
 /**
@@ -21,7 +12,7 @@ type InpaintingCanvasLinesProps = GroupConfig;
  * Uses globalCompositeOperation to handle the brush and eraser tools.
  */
 const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
-  const objects = useAppSelector((state) => state.canvas.layerState.objects);
+  const objects = useAppSelector((s) => s.canvas.layerState.objects);
 
   return (
     <Group listening={false} {...props}>

invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -12,7 +12,7 @@ import { Group, Line, Rect } from 'react-konva';
 import IAICanvasImage from './IAICanvasImage';
 
 const IAICanvasObjectRenderer = () => {
-  const objects = useAppSelector((state) => state.canvas.layerState.objects);
+  const objects = useAppSelector((s) => s.canvas.layerState.objects);
 
   return (
     <Group name="outpainting-objects" listening={false}>

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -1,6 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import type { GroupConfig } from 'konva/lib/Group';
 import { memo } from 'react';
 import { Group, Rect } from 'react-konva';
@@ -9,7 +9,7 @@ import IAICanvasImage from './IAICanvasImage';
 
 const dash = [4, 4];
 
-const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   const {
     layerState,
     shouldShowStagingImage,

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -1,7 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@@ -11,6 +10,7 @@ import {
   discardStagedImages,
   nextStagingAreaImage,
   prevStagingAreaImage,
+  selectCanvasSlice,
   setShouldShowStagingImage,
   setShouldShowStagingOutline,
 } from 'features/canvas/store/canvasSlice';
@@ -29,7 +29,7 @@ import {
 } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
-const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   const {
     layerState: {
       stagingArea: { images, selectedImageIndex },

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';
 import GenerationModeStatusText from 'features/parameters/components/Canvas/GenerationModeStatusText';
 import { memo } from 'react';
@@ -11,7 +11,7 @@ import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusT
 
 const warningColor = 'var(--invokeai-colors-warning-500)';
 
-const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   const {
     stageDimensions: { width: stageWidth, height: stageHeight },
     stageCoordinates: { x: stageX, y: stageY },

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx

@@ -1,12 +1,12 @@
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import {
   $cursorPosition,
   $isMovingBoundingBox,
   $isTransformingBoundingBox,
 } from 'features/canvas/store/canvasNanostore';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import {
   COLOR_PICKER_SIZE,
@@ -17,8 +17,8 @@ import { memo, useMemo } from 'react';
 import { Circle, Group } from 'react-konva';
 
 const canvasBrushPreviewSelector = createMemoizedSelector(
-  stateSelector,
-  ({ canvas }) => {
+  selectCanvasSlice,
+  (canvas) => {
     const {
       brushSize,
       colorPickerColor,

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -1,6 +1,5 @@
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $shift } from 'common/hooks/useGlobalModifiers';
 import {
@@ -18,6 +17,7 @@ import {
 } from 'features/canvas/store/canvasNanostore';
 import {
   aspectRatioChanged,
+  selectCanvasSlice,
   setBoundingBoxCoordinates,
   setBoundingBoxDimensions,
   setShouldSnapToGrid,
@@ -39,8 +39,8 @@ import { Group, Rect, Transformer } from 'react-konva';
 const borderDash = [4, 4];
 
 const boundingBoxPreviewSelector = createMemoizedSelector(
-  [stateSelector, selectOptimalDimension],
-  ({ canvas }, optimalDimension) => {
+  [selectCanvasSlice, selectOptimalDimension],
+  (canvas, optimalDimension) => {
     const {
       boundingBoxCoordinates,
       boundingBoxDimensions,

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { InvButton } from 'common/components/InvButton/InvButton';
@@ -17,6 +16,7 @@ import { canvasMaskSavedToGallery } from 'features/canvas/store/actions';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   clearMask,
+  selectCanvasSlice,
   setIsMaskEnabled,
   setLayer,
   setMaskColor,
@@ -31,8 +31,8 @@ import { useTranslation } from 'react-i18next';
 import { FaMask, FaSave, FaTrash } from 'react-icons/fa';
 
 export const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
+  [selectCanvasSlice, isStagingSelector],
+  (canvas, isStaging) => {
     const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } =
       canvas;
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -1,8 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { redo } from 'features/canvas/store/canvasSlice';
+import { redo, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -10,8 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { FaRedo } from 'react-icons/fa';
 
 const canvasRedoSelector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
-  ({ canvas }, activeTabName) => {
+  [selectCanvasSlice, activeTabNameSelector],
+  (canvas, activeTabName) => {
     const { futureLayerStates } = canvas;
 
     return {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
 import { InvControl } from 'common/components/InvControl/InvControl';
@@ -11,6 +10,7 @@ import {
 } from 'common/components/InvPopover/wrapper';
 import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
 import {
+  selectCanvasSlice,
   setShouldAntialias,
   setShouldAutoSave,
   setShouldCropToBoundingBoxOnSave,
@@ -29,8 +29,8 @@ import { useTranslation } from 'react-i18next';
 import { FaWrench } from 'react-icons/fa';
 
 export const canvasControlsSelector = createMemoizedSelector(
-  [stateSelector],
-  ({ canvas }) => {
+  [selectCanvasSlice],
+  (canvas) => {
     const {
       shouldAutoSave,
       shouldCropToBoundingBoxOnSave,

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@@ -17,6 +16,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   addEraseRect,
   addFillRect,
+  selectCanvasSlice,
   setBrushColor,
   setBrushSize,
   setTool,
@@ -37,8 +37,8 @@ import {
 } from 'react-icons/fa';
 
 export const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
+  [selectCanvasSlice, isStagingSelector],
+  (canvas, isStaging) => {
     const { tool, brushColor, brushSize } = canvas;
 
     return {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
 import { InvControl } from 'common/components/InvControl/InvControl';
@@ -20,6 +19,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   resetCanvas,
   resetCanvasView,
+  selectCanvasSlice,
   setIsMaskEnabled,
   setLayer,
   setTool,
@@ -49,8 +49,8 @@ import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import IAICanvasUndoButton from './IAICanvasUndoButton';
 
 export const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
+  [selectCanvasSlice, isStagingSelector],
+  (canvas, isStaging) => {
     const { tool, shouldCropToBoundingBoxOnSave, layer, isMaskEnabled } =
       canvas;
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -1,8 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { undo } from 'features/canvas/store/canvasSlice';
+import { selectCanvasSlice,undo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -10,8 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { FaUndo } from 'react-icons/fa';
 
 const canvasUndoSelector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
-  ({ canvas }, activeTabName) => {
+  [selectCanvasSlice, activeTabNameSelector],
+  (canvas, activeTabName) => {
     const { pastLayerStates } = canvas;
 
     return {

invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -12,7 +12,7 @@ import { useCallback } from 'react';
 const useCanvasDrag = () => {
   const dispatch = useAppDispatch();
   const isStaging = useAppSelector(isStagingSelector);
-  const tool = useAppSelector((state) => state.canvas.tool);
+  const tool = useAppSelector((s) => s.canvas.tool);
   const isMovingBoundingBox = useStore($isMovingBoundingBox);
   const handleDragStart = useCallback(() => {
     if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) {

invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts

@@ -6,18 +6,18 @@ import { useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 export const useCanvasGenerationMode = () => {
-  const layerState = useAppSelector((state) => state.canvas.layerState);
+  const layerState = useAppSelector((s) => s.canvas.layerState);
 
   const boundingBoxCoordinates = useAppSelector(
-    (state) => state.canvas.boundingBoxCoordinates
+    (s) => s.canvas.boundingBoxCoordinates
   );
   const boundingBoxDimensions = useAppSelector(
-    (state) => state.canvas.boundingBoxDimensions
+    (s) => s.canvas.boundingBoxDimensions
   );
-  const isMaskEnabled = useAppSelector((state) => state.canvas.isMaskEnabled);
+  const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
 
   const shouldPreserveMaskedArea = useAppSelector(
-    (state) => state.canvas.shouldPreserveMaskedArea
+    (s) => s.canvas.shouldPreserveMaskedArea
   );
   const [generationMode, setGenerationMode] = useState<
     GenerationMode | undefined

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -1,5 +1,4 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   resetCanvasInteractionState,
@@ -8,6 +7,7 @@ import {
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   clearMask,
+  selectCanvasSlice,
   setIsMaskEnabled,
   setShouldShowBoundingBox,
   setShouldSnapToGrid,
@@ -20,8 +20,8 @@ import { useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 const selector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector, isStagingSelector],
-  ({ canvas }, activeTabName, isStaging) => {
+  [selectCanvasSlice, activeTabNameSelector, isStagingSelector],
+  (canvas, activeTabName, isStaging) => {
     const {
       shouldLockBoundingBox,
       shouldShowBoundingBox,

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -1,12 +1,11 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   setIsDrawing,
   setIsMovingStage,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { addLine } from 'features/canvas/store/canvasSlice';
+import { addLine, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type Konva from 'konva';
@@ -17,11 +16,10 @@ import { useCallback } from 'react';
 import useColorPicker from './useColorUnderCursor';
 
 const selector = createMemoizedSelector(
-  [activeTabNameSelector, stateSelector, isStagingSelector],
-  (activeTabName, { canvas }, isStaging) => {
-    const { tool } = canvas;
+  [activeTabNameSelector, selectCanvasSlice, isStagingSelector],
+  (activeTabName, canvas, isStaging) => {
     return {
-      tool,
+      tool: canvas.tool,
       activeTabName,
       isStaging,
     };

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -1,13 +1,15 @@
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   $isDrawing,
   setCursorPosition,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
+import {
+  addPointToCurrentLine,
+  selectCanvasSlice,
+} from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type Konva from 'konva';
@@ -18,11 +20,10 @@ import { useCallback } from 'react';
 import useColorPicker from './useColorUnderCursor';
 
 const selector = createMemoizedSelector(
-  [activeTabNameSelector, stateSelector, isStagingSelector],
-  (activeTabName, { canvas }, isStaging) => {
-    const { tool } = canvas;
+  [activeTabNameSelector, selectCanvasSlice, isStagingSelector],
+  (activeTabName, canvas, isStaging) => {
     return {
-      tool,
+      tool: canvas.tool,
       activeTabName,
       isStaging,
     };

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -1,6 +1,4 @@
 import { useStore } from '@nanostores/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   $isDrawing,
@@ -8,32 +6,20 @@ import {
   setIsMovingStage,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  // addPointToCurrentEraserLine,
-  addPointToCurrentLine,
-} from 'features/canvas/store/canvasSlice';
+import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
 import type Konva from 'konva';
 import type { MutableRefObject } from 'react';
 import { useCallback } from 'react';
 
-const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
-    return {
-      tool: canvas.tool,
-      isStaging,
-    };
-  }
-);
-
 const useCanvasMouseUp = (
   stageRef: MutableRefObject<Konva.Stage | null>,
   didMouseMoveRef: MutableRefObject<boolean>
 ) => {
   const dispatch = useAppDispatch();
   const isDrawing = useStore($isDrawing);
-  const { tool, isStaging } = useAppSelector(selector);
+  const tool = useAppSelector((s) => s.canvas.tool);
+  const isStaging = useAppSelector(isStagingSelector);
 
   return useCallback(() => {
     if (tool === 'move' || isStaging) {

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -1,6 +1,4 @@
 import { useStore } from '@nanostores/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore';
 import {
@@ -18,14 +16,9 @@ import { clamp } from 'lodash-es';
 import type { MutableRefObject } from 'react';
 import { useCallback } from 'react';
 
-const selector = createMemoizedSelector(
-  [stateSelector],
-  (state) => state.canvas.stageScale
-);
-
 const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   const dispatch = useAppDispatch();
-  const stageScale = useAppSelector(selector);
+  const stageScale = useAppSelector((s) => s.canvas.stageScale);
   const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld);
 
   return useCallback(

invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts

@@ -1,13 +1,13 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import type { RootState } from 'app/store/store';
-import { stateSelector } from 'app/store/store';
 
+import { selectCanvasSlice } from './canvasSlice';
 import type { CanvasImage } from './canvasTypes';
 import { isCanvasBaseImage } from './canvasTypes';
 
 export const isStagingSelector = createMemoizedSelector(
-  [stateSelector],
-  ({ canvas }) =>
+  selectCanvasSlice,
+  (canvas) =>
     canvas.batchIds.length > 0 ||
     canvas.layerState.stagingArea.images.length > 0
 );

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import {
   roundDownToMultiple,
   roundToMultiple,
@@ -781,3 +782,5 @@ export const {
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;
+
+export const selectCanvasSlice = (state: RootState) => state.canvas;

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog';
 import { InvControl } from 'common/components/InvControl/InvControl';
@@ -13,6 +12,7 @@ import { InvText } from 'common/components/InvText/wrapper';
 import {
   changeBoardReset,
   isModalOpenChanged,
+  selectChangeBoardModalSlice,
 } from 'features/changeBoardModal/store/slice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,8 +23,8 @@ import {
 } from 'services/api/endpoints/images';
 
 const selector = createMemoizedSelector(
-  [stateSelector],
-  ({ changeBoardModal }) => {
+  selectChangeBoardModalSlice,
+  (changeBoardModal) => {
     const { isModalOpen, imagesToChange } = changeBoardModal;
 
     return {

invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import type { ImageDTO } from 'services/api/types';
 
 import { initialState } from './initialState';
@@ -25,3 +26,6 @@ export const { isModalOpenChanged, imagesToChangeSelected, changeBoardReset } =
   changeBoardModal.actions;
 
 export default changeBoardModal.reducer;
+
+export const selectChangeBoardModalSlice = (state: RootState) =>
+  state.changeBoardModal;

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx

@@ -2,7 +2,6 @@ import type { SystemStyleObject } from '@chakra-ui/react';
 import { Box, Flex, Spinner } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
@@ -10,16 +9,21 @@ import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { useControlAdapterControlImage } from 'features/controlAdapters/hooks/useControlAdapterControlImage';
 import { useControlAdapterProcessedControlImage } from 'features/controlAdapters/hooks/useControlAdapterProcessedControlImage';
 import { useControlAdapterProcessorType } from 'features/controlAdapters/hooks/useControlAdapterProcessorType';
-import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  controlAdapterImageChanged,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import type {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
+import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import {
   heightChanged,
   selectOptimalDimension,
   widthChanged,
 } from 'features/parameters/store/generationSlice';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -38,8 +42,14 @@ type Props = {
 };
 
 const selector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector, selectOptimalDimension],
-  ({ controlAdapters, gallery, system }, activeTabName, optimalDimension) => {
+  [
+    selectControlAdaptersSlice,
+    selectGallerySlice,
+    selectSystemSlice,
+    activeTabNameSelector,
+    selectOptimalDimension,
+  ],
+  (controlAdapters, gallery, system, activeTabName, optimalDimension) => {
     const { pendingControlImages } = controlAdapters;
     const { autoAddBoardId } = gallery;
     const { isConnected } = system;

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -1,5 +1,4 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSelect } from 'common/components/InvSelect/InvSelect';
@@ -10,6 +9,7 @@ import { useControlAdapterModel } from 'features/controlAdapters/hooks/useContro
 import { useControlAdapterModelEntities } from 'features/controlAdapters/hooks/useControlAdapterModelEntities';
 import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
 import { controlAdapterModelChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { pick } from 'lodash-es';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,9 +24,8 @@ type ParamControlAdapterModelProps = {
   id: string;
 };
 
-const selector = createMemoizedSelector(stateSelector, ({ generation }) => {
-  const { model } = generation;
-  return { mainModel: model };
+const selector = createMemoizedSelector(selectGenerationSlice, (generation) => {
+  return { mainModel: generation.model };
 });
 
 const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
@@ -35,7 +34,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   const model = useControlAdapterModel(id);
   const dispatch = useAppDispatch();
   const currentBaseModel = useAppSelector(
-    (state) => state.generation.model?.base_model
+    (s) => s.generation.model?.base_model
   );
   const { mainModel } = useAppSelector(selector);
   const { t } = useTranslation();

invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts

@@ -7,7 +7,7 @@ import { useControlAdapterModels } from './useControlAdapterModels';
 
 export const useAddControlAdapter = (type: ControlAdapterType) => {
   const baseModel = useAppSelector(
-    (state) => state.generation.model?.base_model
+    (s) => s.generation.model?.base_model
   );
   const dispatch = useAppDispatch();
 

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapter.ts

@@ -1,13 +1,15 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapter = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) =>
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) =>
         selectControlAdapterById(controlAdapters, id)
       ),
     [id]

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterBeginEndStepPct.ts

@@ -1,13 +1,15 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterBeginEndStepPct = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const cn = selectControlAdapterById(controlAdapters, id);
         return cn
           ? {

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts

@@ -1,15 +1,17 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterControlImage = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ controlAdapters }) =>
+        selectControlAdaptersSlice,
+        (controlAdapters) =>
           selectControlAdapterById(controlAdapters, id)?.controlImage
       ),
     [id]

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlMode.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNet } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterControlMode = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
         if (ca && isControlNet(ca)) {
           return ca.controlMode;

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts

@@ -1,15 +1,17 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterIsEnabled = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ controlAdapters }) =>
+        selectControlAdaptersSlice,
+        (controlAdapters) =>
           selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false
       ),
     [id]

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts

@@ -1,15 +1,17 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterModel = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ controlAdapters }) =>
+        selectControlAdaptersSlice,
+        (controlAdapters) =>
           selectControlAdapterById(controlAdapters, id)?.model
       ),
     [id]

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterProcessedControlImage = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
         return ca && isControlNetOrT2IAdapter(ca)

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterProcessorNode = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
         return ca && isControlNetOrT2IAdapter(ca)

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterProcessorType = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
         return ca && isControlNetOrT2IAdapter(ca)

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterResizeMode.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterResizeMode = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
         if (ca && isControlNetOrT2IAdapter(ca)) {
           return ca.resizeMode;

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterShouldAutoConfig.ts

@@ -1,14 +1,16 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { useMemo } from 'react';
 
 export const useControlAdapterShouldAutoConfig = (id: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
         if (ca && isControlNetOrT2IAdapter(ca)) {
           return ca.shouldAutoConfig;

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterType.ts

@@ -1,16 +1,17 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterType = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ controlAdapters }) =>
-          selectControlAdapterById(controlAdapters, id)?.type
+        selectControlAdaptersSlice,
+        (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.type
       ),
     [id]
   );

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts

@@ -1,15 +1,17 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
 
 export const useControlAdapterWeight = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ controlAdapters }) =>
+        selectControlAdaptersSlice,
+        (controlAdapters) =>
           selectControlAdapterById(controlAdapters, id)?.weight
       ),
     [id]

invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts

@@ -1,6 +1,7 @@
 import type { PayloadAction, Update } from '@reduxjs/toolkit';
 import { createEntityAdapter, createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
+import type { RootState } from 'app/store/store';
 import { buildControlAdapter } from 'features/controlAdapters/util/buildControlAdapter';
 import type {
   ParameterControlNetModel,
@@ -489,3 +490,6 @@ export const isAnyControlAdapterAdded = isAnyOf(
   controlAdapterAddedFromImage,
   controlAdapterRecalled
 );
+
+export const selectControlAdaptersSlice = (state: RootState) =>
+  state.controlAdapters;

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx

@@ -12,7 +12,7 @@ type DeleteImageButtonProps = Omit<InvIconButtonProps, 'aria-label'> & {
 export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
   const { onClick, isDisabled } = props;
   const { t } = useTranslation();
-  const isConnected = useAppSelector((state) => state.system.isConnected);
+  const isConnected = useAppSelector((s) => s.system.isConnected);
 
   return (
     <InvIconButton

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

@@ -1,11 +1,12 @@
 import { Divider, Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { InvText } from 'common/components/InvText/wrapper';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
 import {
   getImageUsage,
@@ -14,9 +15,16 @@ import {
 import {
   imageDeletionCanceled,
   isModalOpenChanged,
+  selectDeleteImageModalSlice,
 } from 'features/deleteImageModal/store/slice';
 import type { ImageUsage } from 'features/deleteImageModal/store/types';
-import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
+import {
+  selectSystemSlice,
+  setShouldConfirmOnDelete,
+} from 'features/system/store/systemSlice';
 import { some } from 'lodash-es';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -25,15 +33,32 @@ import { useTranslation } from 'react-i18next';
 import ImageUsageMessage from './ImageUsageMessage';
 
 const selector = createMemoizedSelector(
-  [stateSelector, selectImageUsage],
-  (state, imagesUsage) => {
-    const { system, config, deleteImageModal } = state;
+  [
+    selectSystemSlice,
+    selectConfigSlice,
+    selectDeleteImageModalSlice,
+    selectGenerationSlice,
+    selectCanvasSlice,
+    selectNodesSlice,
+    selectControlAdaptersSlice,
+    selectImageUsage,
+  ],
+  (
+    system,
+    config,
+    deleteImageModal,
+    generation,
+    canvas,
+    nodes,
+    controlAdapters,
+    imagesUsage
+  ) => {
     const { shouldConfirmOnDelete } = system;
     const { canRestoreDeletedImagesFromBin } = config;
     const { imagesToDelete, isModalOpen } = deleteImageModal;
 
     const allImageUsage = (imagesToDelete ?? []).map(({ image_name }) =>
-      getImageUsage(state, image_name)
+      getImageUsage(generation, canvas, nodes, controlAdapters, image_name)
     );
 
     const imageUsageSummary: ImageUsage = {

invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts

@@ -1,15 +1,30 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import type { RootState } from 'app/store/store';
-import { selectControlAdapterAll } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import type { CanvasState } from 'features/canvas/store/canvasTypes';
+import {
+  selectControlAdapterAll,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import type { ControlAdaptersState } from 'features/controlAdapters/store/types';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+import { selectDeleteImageModalSlice } from 'features/deleteImageModal/store/slice';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import type { NodesState } from 'features/nodes/store/types';
 import { isImageFieldInputInstance } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
+import type { GenerationState } from 'features/parameters/store/types';
 import { some } from 'lodash-es';
 
 import type { ImageUsage } from './types';
 
-export const getImageUsage = (state: RootState, image_name: string) => {
-  const { generation, canvas, nodes, controlAdapters } = state;
+export const getImageUsage = (
+  generation: GenerationState,
+  canvas: CanvasState,
+  nodes: NodesState,
+  controlAdapters: ControlAdaptersState,
+  image_name: string
+) => {
   const isInitialImage = generation.initialImage?.imageName === image_name;
 
   const isCanvasImage = canvas.layerState.objects.some(
@@ -42,16 +57,20 @@ export const getImageUsage = (state: RootState, image_name: string) => {
 };
 
 export const selectImageUsage = createMemoizedSelector(
-  [(state: RootState) => state],
-  (state) => {
-    const { imagesToDelete } = state.deleteImageModal;
+  selectDeleteImageModalSlice,
+  selectGenerationSlice,
+  selectCanvasSlice,
+  selectNodesSlice,
+  selectControlAdaptersSlice,
+  (deleteImageModal, generation, canvas, nodes, controlAdapters) => {
+    const { imagesToDelete } = deleteImageModal;
 
     if (!imagesToDelete.length) {
       return [];
     }
 
     const imagesUsage = imagesToDelete.map((i) =>
-      getImageUsage(state, i.image_name)
+      getImageUsage(generation, canvas, nodes, controlAdapters, i.image_name)
     );
 
     return imagesUsage;

invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import type { ImageDTO } from 'services/api/types';
 
 import { initialDeleteImageState } from './initialState';
@@ -28,3 +29,6 @@ export const {
 } = deleteImageModal.actions;
 
 export default deleteImageModal.reducer;
+
+export const selectDeleteImageModalSlice = (state: RootState) =>
+  state.deleteImageModal;

invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts

@@ -1,14 +1,14 @@
 import type { Modifier } from '@dnd-kit/core';
 import { getEventCoordinates } from '@dnd-kit/utilities';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback } from 'react';
 
 const selectZoom = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
-  ({ nodes }, activeTabName) =>
+  [selectNodesSlice, activeTabNameSelector],
+  (nodes, activeTabName) =>
     activeTabName === 'nodes' ? nodes.viewport.zoom : 1
 );
 

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx

@@ -1,5 +1,3 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
@@ -7,14 +5,8 @@ import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromp
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(stateSelector, (state) => {
-  const { combinatorial } = state.dynamicPrompts;
-
-  return { combinatorial };
-});
-
 const ParamDynamicPromptsCombinatorial = () => {
-  const { combinatorial } = useAppSelector(selector);
+  const combinatorial = useAppSelector((s) => s.dynamicPrompts.combinatorial);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx

@@ -1,26 +1,33 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import {
+  maxPromptsChanged,
+  selectDynamicPromptsSlice,
+} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(stateSelector, (state) => {
-  const { maxPrompts, combinatorial } = state.dynamicPrompts;
-  const { min, sliderMax, inputMax, initial } =
-    state.config.sd.dynamicPrompts.maxPrompts;
+const selector = createMemoizedSelector(
+  selectDynamicPromptsSlice,
+  selectConfigSlice,
+  (dynamicPrompts, config) => {
+    const { maxPrompts, combinatorial } = dynamicPrompts;
+    const { min, sliderMax, inputMax, initial } =
+      config.sd.dynamicPrompts.maxPrompts;
 
-  return {
-    maxPrompts,
-    min,
-    sliderMax,
-    inputMax,
-    initial,
-    isDisabled: !combinatorial,
-  };
-});
+    return {
+      maxPrompts,
+      min,
+      sliderMax,
+      inputMax,
+      initial,
+      isDisabled: !combinatorial,
+    };
+  }
+);
 
 const ParamDynamicPromptsMaxPrompts = () => {
   const { maxPrompts, min, sliderMax, inputMax, initial, isDisabled } =

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx

@@ -1,26 +1,29 @@
 import type { ChakraProps } from '@chakra-ui/react';
 import { Flex, ListItem, OrderedList, Spinner } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
 import { InvText } from 'common/components/InvText/wrapper';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCircleExclamation } from 'react-icons/fa6';
 
-const selector = createMemoizedSelector(stateSelector, (state) => {
-  const { isLoading, isError, prompts, parsingError } = state.dynamicPrompts;
+const selector = createMemoizedSelector(
+  selectDynamicPromptsSlice,
+  (dynamicPrompts) => {
+    const { isLoading, isError, prompts, parsingError } = dynamicPrompts;
 
-  return {
-    prompts,
-    parsingError,
-    isError,
-    isLoading,
-  };
-});
+    return {
+      prompts,
+      parsingError,
+      isError,
+      isLoading,
+    };
+  }
+);
 
 const listItemStyles: ChakraProps['sx'] = {
   '&::marker': { color: 'base.500' },

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx

@@ -16,7 +16,7 @@ const ParamDynamicPromptsSeedBehaviour = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const seedBehaviour = useAppSelector(
-    (state) => state.dynamicPrompts.seedBehaviour
+    (s) => s.dynamicPrompts.seedBehaviour
   );
 
   const options = useMemo<InvSelectOption[]>(() => {

invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx

@@ -14,7 +14,7 @@ const loadingStyles: SystemStyleObject = {
 
 export const ShowDynamicPromptsPreviewButton = memo(() => {
   const { t } = useTranslation();
-  const isLoading = useAppSelector((state) => state.dynamicPrompts.isLoading);
+  const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading);
   const { isOpen, onOpen } = useDynamicPromptsModal();
   return (
     <InvTooltip

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import { z } from 'zod';
 
 export const zSeedBehaviour = z.enum(['PER_ITERATION', 'PER_PROMPT']);
@@ -74,3 +75,6 @@ export const {
 } = dynamicPromptsSlice.actions;
 
 export default dynamicPromptsSlice.reducer;
+
+export const selectDynamicPromptsSlice = (state: RootState) =>
+  state.dynamicPrompts;

invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx

@@ -18,7 +18,7 @@ export const EmbeddingSelect = memo(
     const { t } = useTranslation();
 
     const currentBaseModel = useAppSelector(
-      (state) => state.generation.model?.base_model
+      (s) => s.generation.model?.base_model
     );
 
     const getIsDisabled = useCallback(

invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx

@@ -1,5 +1,3 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSelect } from 'common/components/InvSelect/InvSelect';
@@ -7,24 +5,22 @@ import type {
   InvSelectOnChange,
   InvSelectOption,
 } from 'common/components/InvSelect/types';
-import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
+import {
+  autoAddBoardIdChanged,
+} from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 
-const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
-  const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
-
-  return {
-    autoAddBoardId,
-    autoAssignBoardOnClick,
-  };
-});
-
 const BoardAutoAddSelect = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
+  const autoAddBoardId = useAppSelector(
+    (s) => s.gallery.autoAddBoardId
+  );
+  const autoAssignBoardOnClick = useAppSelector(
+    (s) => s.gallery.autoAssignBoardOnClick
+  );
   const { options, hasBoards } = useListAllBoardsQuery(undefined, {
     selectFromResult: ({ data }) => {
       const options: InvSelectOption[] = [

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -1,12 +1,14 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
 import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
 import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
 import { InvMenuList } from 'common/components/InvMenu/InvMenuList';
 import { InvMenuGroup } from 'common/components/InvMenu/wrapper';
-import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
+import {
+  autoAddBoardIdChanged,
+  selectGallerySlice,
+} from 'features/gallery/store/gallerySlice';
 import type { BoardId } from 'features/gallery/store/types';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { addToast } from 'features/system/store/systemSlice';
@@ -38,7 +40,7 @@ const BoardContextMenu = ({
 
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ gallery }) => {
+      createMemoizedSelector(selectGallerySlice, (gallery) => {
         const isAutoAdd = gallery.autoAddBoardId === board_id;
         const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;
         return { isAutoAdd, autoAssignBoardOnClick };

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -1,6 +1,4 @@
 import { Collapse, Flex, Grid, GridItem } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
@@ -20,18 +18,18 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
-  const { selectedBoardId, boardSearchText } = gallery;
-  return { selectedBoardId, boardSearchText };
-});
-
 type Props = {
   isOpen: boolean;
 };
 
 const BoardsList = (props: Props) => {
   const { isOpen } = props;
-  const { selectedBoardId, boardSearchText } = useAppSelector(selector);
+  const selectedBoardId = useAppSelector(
+    (s) => s.gallery.selectedBoardId
+  );
+  const boardSearchText = useAppSelector(
+    (s) => s.gallery.boardSearchText
+  );
   const { data: boards } = useListAllBoardsQuery();
   const filteredBoards = boardSearchText
     ? boards?.filter((board) =>

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx

@@ -1,7 +1,5 @@
 import { CloseIcon } from '@chakra-ui/icons';
 import { Input, InputGroup, InputRightElement } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
@@ -9,14 +7,9 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
-  const { boardSearchText } = gallery;
-  return { boardSearchText };
-});
-
 const BoardsSearch = () => {
   const dispatch = useAppDispatch();
-  const { boardSearchText } = useAppSelector(selector);
+  const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
   const inputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
 

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -10,7 +10,6 @@ import {
 } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import { InvText } from 'common/components/InvText/wrapper';
@@ -22,6 +21,7 @@ import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMen
 import {
   autoAddBoardIdChanged,
   boardIdSelected,
+  selectGallerySlice,
 } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,7 +56,7 @@ const GalleryBoard = ({
   const dispatch = useAppDispatch();
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ gallery }) => {
+      createMemoizedSelector(selectGallerySlice, (gallery) => {
         const isSelectedForAutoAdd = board.board_id === gallery.autoAddBoardId;
         const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;
 

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -1,6 +1,4 @@
 import { Box, Flex, Image } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import InvokeAILogoImage from 'assets/images/logo.png';
 import IAIDroppable from 'common/components/IAIDroppable';
@@ -26,14 +24,12 @@ interface Props {
   isSelected: boolean;
 }
 
-const selector = createMemoizedSelector(stateSelector, ({ gallery }) => {
-  const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
-  return { autoAddBoardId, autoAssignBoardOnClick };
-});
-
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
-  const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
+  const autoAssignBoardOnClick = useAppSelector(
+    (s) => s.gallery.autoAssignBoardOnClick
+  );
   const boardName = useBoardName('none');
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected({ boardId: 'none' }));

invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx

@@ -1,7 +1,6 @@
 import { Flex, Skeleton } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import {
   InvAlertDialog,
@@ -13,9 +12,13 @@ import {
 } from 'common/components/InvAlertDialog/wrapper';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvText } from 'common/components/InvText/wrapper';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
 import ImageUsageMessage from 'features/deleteImageModal/components/ImageUsageMessage';
 import { getImageUsage } from 'features/deleteImageModal/store/selectors';
 import type { ImageUsage } from 'features/deleteImageModal/store/types';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { some } from 'lodash-es';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -35,26 +38,34 @@ const DeleteBoardModal = (props: Props) => {
   const { boardToDelete, setBoardToDelete } = props;
   const { t } = useTranslation();
   const canRestoreDeletedImagesFromBin = useAppSelector(
-    (state) => state.config.canRestoreDeletedImagesFromBin
+    (s) => s.config.canRestoreDeletedImagesFromBin
   );
   const { currentData: boardImageNames, isFetching: isFetchingBoardNames } =
     useListAllImageNamesForBoardQuery(boardToDelete?.board_id ?? skipToken);
 
   const selectImageUsageSummary = useMemo(
     () =>
-      createMemoizedSelector([stateSelector], (state) => {
-        const allImageUsage = (boardImageNames ?? []).map((imageName) =>
-          getImageUsage(state, imageName)
-        );
+      createMemoizedSelector(
+        [
+          selectGenerationSlice,
+          selectCanvasSlice,
+          selectNodesSlice,
+          selectControlAdaptersSlice,
+        ],
+        (generation, canvas, nodes, controlAdapters) => {
+          const allImageUsage = (boardImageNames ?? []).map((imageName) =>
+            getImageUsage(generation, canvas, nodes, controlAdapters, imageName)
+          );
 
-        const imageUsageSummary: ImageUsage = {
-          isInitialImage: some(allImageUsage, (i) => i.isInitialImage),
-          isCanvasImage: some(allImageUsage, (i) => i.isCanvasImage),
-          isNodesImage: some(allImageUsage, (i) => i.isNodesImage),
-          isControlImage: some(allImageUsage, (i) => i.isControlImage),
-        };
-        return { imageUsageSummary };
-      }),
+          const imageUsageSummary: ImageUsage = {
+            isInitialImage: some(allImageUsage, (i) => i.isInitialImage),
+            isCanvasImage: some(allImageUsage, (i) => i.isCanvasImage),
+            isNodesImage: some(allImageUsage, (i) => i.isNodesImage),
+            isControlImage: some(allImageUsage, (i) => i.isControlImage),
+          };
+          return { imageUsageSummary };
+        }
+      ),
     [boardImageNames]
   );
 

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx

@@ -3,7 +3,6 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
@@ -13,13 +12,17 @@ import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteIm
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
 import { sentImageToImg2Img } from 'features/gallery/store/actions';
+import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import ParamUpscalePopover from 'features/parameters/components/Upscale/ParamUpscaleSettings';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { selectConfigSlice } from 'features/system/store/configSlice';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import {
+  selectUiSlice,
   setShouldShowImageDetails,
   setShouldShowProgressInViewer,
 } from 'features/ui/store/uiSlice';
@@ -40,8 +43,14 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
 
 const currentImageButtonsSelector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
-  ({ gallery, system, ui, config }, activeTabName) => {
+  [
+    selectGallerySlice,
+    selectSystemSlice,
+    selectUiSlice,
+    selectConfigSlice,
+    activeTabNameSelector,
+  ],
+  (gallery, system, ui, config, activeTabName) => {
     const { isConnected, shouldConfirmOnDelete, denoiseProgress } = system;
 
     const {

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx

@@ -1,7 +1,6 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -14,6 +13,8 @@ import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
+import { selectUiSlice } from 'features/ui/store/uiSlice';
 import type { AnimationProps } from 'framer-motion';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { CSSProperties } from 'react';
@@ -24,8 +25,10 @@ import { FaImage } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
 export const imagesSelector = createMemoizedSelector(
-  [stateSelector, selectLastSelectedImage],
-  ({ ui, system }, lastSelectedImage) => {
+  selectUiSlice,
+  selectSystemSlice,
+  selectLastSelectedImage,
+  (ui, system, lastSelectedImage) => {
     const {
       shouldShowImageDetails,
       shouldHidePreview,

invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx

@@ -5,10 +5,10 @@ import { memo, useMemo } from 'react';
 
 const CurrentImagePreview = () => {
   const progress_image = useAppSelector(
-    (state) => state.system.denoiseProgress?.progress_image
+    (s) => s.system.denoiseProgress?.progress_image
   );
   const shouldAntialiasProgressImage = useAppSelector(
-    (state) => state.system.shouldAntialiasProgressImage
+    (s) => s.system.shouldAntialiasProgressImage
   );
 
   const sx = useMemo<SystemStyleObject>(

invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx

@@ -1,17 +1,9 @@
 import { ChevronUpIcon } from '@chakra-ui/icons';
 import { Button, Flex, Spacer } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useMemo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
-const selector = createMemoizedSelector([stateSelector], (state) => {
-  const { selectedBoardId } = state.gallery;
-
-  return { selectedBoardId };
-});
-
 type Props = {
   isOpen: boolean;
   onToggle: () => void;
@@ -19,7 +11,7 @@ type Props = {
 
 const GalleryBoardName = (props: Props) => {
   const { isOpen, onToggle } = props;
-  const { selectedBoardId } = useAppSelector(selector);
+  const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardName = useBoardName(selectedBoardId);
 
   const formattedBoardName = useMemo(() => {

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
 import { InvControl } from 'common/components/InvControl/InvControl';
@@ -15,6 +14,7 @@ import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import {
   autoAssignBoardOnClickChanged,
+  selectGallerySlice,
   setGalleryImageMinimumWidth,
   shouldAutoSwitchChanged,
 } from 'features/gallery/store/gallerySlice';
@@ -25,9 +25,9 @@ import { FaWrench } from 'react-icons/fa';
 
 import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
 
-const selector = createMemoizedSelector([stateSelector], (state) => {
+const selector = createMemoizedSelector(selectGallerySlice, (gallery) => {
   const { galleryImageMinimumWidth, shouldAutoSwitch, autoAssignBoardOnClick } =
-    state.gallery;
+    gallery;
 
   return {
     galleryImageMinimumWidth,

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx

@@ -1,5 +1,3 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
 import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
@@ -16,14 +14,8 @@ type Props = {
   children: InvContextMenuProps<HTMLDivElement>['children'];
 };
 
-const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
-  const selectionCount = gallery.selection.length;
-
-  return { selectionCount };
-});
-
 const ImageContextMenu = ({ imageDTO, children }: Props) => {
-  const { selectionCount } = useAppSelector(selector);
+  const selectionCount = useAppSelector((s) => s.gallery.selection.length);
 
   const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
     e.preventDefault();

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx

@@ -22,7 +22,7 @@ import {
 const MultipleSelectionMenuItems = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const selection = useAppSelector((state) => state.gallery.selection);
+  const selection = useAppSelector((s) => s.gallery.selection);
   const customStarUi = useStore($customStarUI);
 
   const isBulkDownloadEnabled =

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -8,9 +8,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { useStore } from '@nanostores/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@@ -24,19 +22,11 @@ import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 
-const selector = createMemoizedSelector([stateSelector], (state) => {
-  const { galleryView } = state.gallery;
-
-  return {
-    galleryView,
-  };
-});
-
 const ImageGalleryContent = () => {
   const { t } = useTranslation();
   const resizeObserverRef = useRef<HTMLDivElement>(null);
   const galleryGridRef = useRef<HTMLDivElement>(null);
-  const { galleryView } = useAppSelector(selector);
+  const galleryView = useAppSelector((s) => s.gallery.galleryView);
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
   const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } =

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -45,7 +45,7 @@ const GalleryImageGrid = () => {
     overlayScrollbarsParams
   );
   const selectedBoardId = useAppSelector(
-    (state) => state.gallery.selectedBoardId
+    (s) => s.gallery.selectedBoardId
   );
   const { currentViewTotal } = useBoardTotal(selectedBoardId);
   const queryArgs = useAppSelector(selectListImagesBaseQueryArgs);

invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts

@@ -1,8 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { selectionChanged } from 'features/gallery/store/gallerySlice';
+import { selectGallerySlice, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import type { MouseEvent } from 'react';
 import { useCallback, useMemo } from 'react';
@@ -11,13 +10,11 @@ import type { ImageDTO } from 'services/api/types';
 import { imagesSelectors } from 'services/api/util';
 
 const selector = createMemoizedSelector(
-  [stateSelector, selectListImagesBaseQueryArgs],
-  ({ gallery }, queryArgs) => {
-    const selection = gallery.selection;
-
+  [selectGallerySlice, selectListImagesBaseQueryArgs],
+  (gallery, queryArgs) => {
     return {
       queryArgs,
-      selection,
+      selection: gallery.selection,
     };
   }
 );

invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts

@@ -1,5 +1,5 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
+import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
@@ -29,7 +29,7 @@ export const $useNextPrevImageState = map<UseNextPrevImageState>({
 });
 
 export const nextPrevImageButtonsSelector = createMemoizedSelector(
-  [stateSelector, selectListImagesBaseQueryArgs],
+  [(state: RootState) => state, selectListImagesBaseQueryArgs],
   (state, baseQueryArgs) => {
     const { data, status } =
       imagesApi.endpoints.listImages.select(baseQueryArgs)(state);

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -12,7 +12,7 @@ export const gallerySelector = (state: RootState) => state.gallery;
 
 export const selectLastSelectedImage = createMemoizedSelector(
   (state: RootState) => state,
-  (state) => state.gallery.selection[state.gallery.selection.length - 1]
+  (s) => s.gallery.selection[state.gallery.selection.length - 1]
 );
 
 export const selectListImagesBaseQueryArgs = createMemoizedSelector(

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import { uniqBy } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -103,3 +104,5 @@ const isAnyBoardDeleted = isAnyOf(
   imagesApi.endpoints.deleteBoard.matchFulfilled,
   imagesApi.endpoints.deleteBoardAndImages.matchFulfilled
 );
+
+export const selectGallerySlice = (state: RootState) => state.gallery;

invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx

@@ -9,7 +9,7 @@ import ParamHrfToggle from './ParamHrfToggle';
 
 export const HrfSettings = memo(() => {
   const isHRFFeatureEnabled = useFeatureStatus('hrf').isFeatureEnabled;
-  const hrfEnabled = useAppSelector((state) => state.hrf.hrfEnabled);
+  const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled);
 
   if (!isHRFFeatureEnabled) {
     return null;

invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx

@@ -18,7 +18,7 @@ const options: InvSelectOption[] = [
 const ParamHrfMethodSelect = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const hrfMethod = useAppSelector((state) => state.hrf.hrfMethod);
+  const hrfMethod = useAppSelector((s) => s.hrf.hrfMethod);
 
   const onChange = useCallback<InvSelectOnChange>(
     (v) => {

invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx

@@ -1,27 +1,31 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { setHrfStrength } from 'features/hrf/store/hrfSlice';
+import { selectHrfSlice, setHrfStrength } from 'features/hrf/store/hrfSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector([stateSelector], ({ hrf, config }) => {
-  const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
-    config.sd.hrfStrength;
-  const { hrfStrength } = hrf;
+const selector = createMemoizedSelector(
+  selectHrfSlice,
+  selectConfigSlice,
+  (hrf, config) => {
+    const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
+      config.sd.hrfStrength;
+    const { hrfStrength } = hrf;
 
-  return {
-    hrfStrength,
-    initial,
-    min,
-    sliderMax,
-    inputMax,
-    step: coarseStep,
-    fineStep,
-  };
-});
+    return {
+      hrfStrength,
+      initial,
+      min,
+      sliderMax,
+      inputMax,
+      step: coarseStep,
+      fineStep,
+    };
+  }
+);
 
 const ParamHrfStrength = () => {
   const { hrfStrength, initial, min, sliderMax, step, fineStep } =

invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import type {
   ParameterHRFMethod,
   ParameterStrength,
@@ -38,3 +39,5 @@ export const hrfSlice = createSlice({
 export const { setHrfEnabled, setHrfStrength, setHrfMethod } = hrfSlice.actions;
 
 export default hrfSlice.reducer;
+
+export const selectHrfSlice = (state: RootState) => state.hrf;

invokeai/frontend/web/src/features/lora/components/LoRAList.tsx

@@ -1,12 +1,12 @@
 import { Flex } from '@chakra-ui/layout';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { LoRACard } from 'features/lora/components/LoRACard';
+import { selectLoraSlice } from 'features/lora/store/loraSlice';
 import { map } from 'lodash-es';
 import { memo } from 'react';
 
-const selector = createMemoizedSelector(stateSelector, ({ lora }) => {
+const selector = createMemoizedSelector(selectLoraSlice, (lora) => {
   return { lorasArray: map(lora.loras) };
 });
 

invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx

@@ -1,17 +1,16 @@
 import type { ChakraProps } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSelect } from 'common/components/InvSelect/InvSelect';
 import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect';
-import { loraAdded } from 'features/lora/store/loraSlice';
+import { loraAdded, selectLoraSlice } from 'features/lora/store/loraSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
 
-const selector = createMemoizedSelector(stateSelector, ({ lora }) => ({
+const selector = createMemoizedSelector(selectLoraSlice, (lora) => ({
   addedLoRAs: lora.loras,
 }));
 
@@ -21,7 +20,7 @@ const LoRASelect = () => {
   const { t } = useTranslation();
   const { addedLoRAs } = useAppSelector(selector);
   const currentBaseModel = useAppSelector(
-    (state) => state.generation.model?.base_model
+    (s) => s.generation.model?.base_model
   );
 
   const getIsDisabled = (lora: LoRAModelConfigEntity): boolean => {

invokeai/frontend/web/src/features/lora/store/loraSlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 import type { ParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
 import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 
@@ -74,3 +75,5 @@ export const {
 } = loraSlice.actions;
 
 export default loraSlice.reducer;
+
+export const selectLoraSlice = (state: RootState) => state.lora;

invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store/store';
 
 type ModelManagerState = {
   searchFolder: string | null;
@@ -28,3 +29,5 @@ export const { setSearchFolder, setAdvancedAddScanModel } =
   modelManagerSlice.actions;
 
 export default modelManagerSlice.reducer;
+
+export const selectModelManagerSlice = (state: RootState) => state.modelmanager;

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -39,7 +39,7 @@ const exit: AnimationProps['exit'] = {
 };
 
 const NodeEditor = () => {
-  const isReady = useAppSelector((state) => state.nodes.isReady);
+  const isReady = useAppSelector((s) => s.nodes.isReady);
   const { t } = useTranslation();
   return (
     <Flex

invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx

@@ -3,7 +3,6 @@ import 'reactflow/dist/style.css';
 import { Flex } from '@chakra-ui/react';
 import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { SelectInstance } from 'chakra-react-select';
 import {
@@ -21,8 +20,8 @@ import { useBuildNode } from 'features/nodes/hooks/useBuildNode';
 import {
   addNodePopoverClosed,
   addNodePopoverOpened,
-  nodeAdded,
-} from 'features/nodes/store/nodesSlice';
+  nodeAdded } from 'features/nodes/store/nodesSlice';
+import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
 import { validateSourceAndTargetTypes } from 'features/nodes/store/util/validateSourceAndTargetTypes';
 import { filter, map, memoize, some } from 'lodash-es';
 import type { KeyboardEventHandler } from 'react';
@@ -68,15 +67,15 @@ const AddNodePopover = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const fieldFilter = useAppSelector(
-    (state) => state.nodes.connectionStartFieldType
+    (s) => s.nodes.connectionStartFieldType
   );
   const handleFilter = useAppSelector(
-    (state) => state.nodes.connectionStartParams?.handleType
+    (s) => s.nodes.connectionStartParams?.handleType
   );
 
   const selector = createMemoizedSelector(
-    [stateSelector],
-    ({ nodeTemplates }) => {
+    selectNodeTemplatesSlice,
+    (nodeTemplates) => {
       // If we have a connection in progress, we need to filter the node choices
       const filteredNodeTemplates = fieldFilter
         ? filter(nodeTemplates.templates, (template) => {
@@ -130,7 +129,7 @@ const AddNodePopover = () => {
   );
 
   const { options } = useAppSelector(selector);
-  const isOpen = useAppSelector((state) => state.nodes.isAddNodePopoverOpen);
+  const isOpen = useAppSelector((s) => s.nodes.isAddNodePopoverOpen);
 
   const addNode = useCallback(
     (nodeType: string) => {

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -71,13 +71,13 @@ const snapGrid: [number, number] = [25, 25];
 
 export const Flow = memo(() => {
   const dispatch = useAppDispatch();
-  const nodes = useAppSelector((state) => state.nodes.nodes);
-  const edges = useAppSelector((state) => state.nodes.edges);
-  const viewport = useAppSelector((state) => state.nodes.viewport);
+  const nodes = useAppSelector((s) => s.nodes.nodes);
+  const edges = useAppSelector((s) => s.nodes.edges);
+  const viewport = useAppSelector((s) => s.nodes.viewport);
   const shouldSnapToGrid = useAppSelector(
-    (state) => state.nodes.shouldSnapToGrid
+    (s) => s.nodes.shouldSnapToGrid
   );
-  const selectionMode = useAppSelector((state) => state.nodes.selectionMode);
+  const selectionMode = useAppSelector((s) => s.nodes.selectionMode);
   const flowWrapper = useRef<HTMLDivElement>(null);
   const cursorPosition = useRef<XYPosition | null>(null);
   const isValidConnection = useIsValidConnection();

invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx

@@ -1,14 +1,14 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
 import type { ConnectionLineComponentProps } from 'reactflow';
 import { getBezierPath } from 'reactflow';
 
-const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
+const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
   const { shouldAnimateEdges, connectionStartFieldType, shouldColorEdges } =
     nodes;
 

invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts

@@ -1,6 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 
 import { getFieldColor } from './getEdgeColor';
@@ -12,7 +12,7 @@ export const makeEdgeSelector = (
   targetHandleId: string | null | undefined,
   selected?: boolean
 ) =>
-  createMemoizedSelector(stateSelector, ({ nodes }) => {
+  createMemoizedSelector(selectNodesSlice, (nodes) => {
     const sourceNode = nodes.nodes.find((node) => node.id === source);
     const targetNode = nodes.nodes.find((node) => node.id === target);
 

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -1,13 +1,14 @@
 import { Flex, Image } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { InvText } from 'common/components/InvText/wrapper';
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
+import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import type { CSSProperties, PropsWithChildren } from 'react';
@@ -16,8 +17,9 @@ import { useTranslation } from 'react-i18next';
 import type { NodeProps } from 'reactflow';
 
 const selector = createMemoizedSelector(
-  stateSelector,
-  ({ system, gallery }) => {
+  selectSystemSlice,
+  selectGallerySlice,
+  (system, gallery) => {
     const imageDTO = gallery.selection[gallery.selection.length - 1];
 
     return {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx

@@ -1,10 +1,10 @@
 import type { SystemStyleObject } from '@chakra-ui/react';
 import { Badge, CircularProgress, Flex, Icon, Image } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { InvText } from 'common/components/InvText/wrapper';
 import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import type { NodeExecutionState } from 'features/nodes/types/invocation';
 import { zNodeStatus } from 'features/nodes/types/invocation';
@@ -29,8 +29,8 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => {
   const selectNodeExecutionState = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ nodes }) => nodes.nodeExecutionStates[nodeId]
+        selectNodesSlice,
+        (nodes) => nodes.nodeExecutionStates[nodeId]
       ),
     [nodeId]
   );

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx

@@ -1,7 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import InvocationNode from 'features/nodes/components/flow/nodes/Invocation/InvocationNode';
+import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
 import type { InvocationNodeData } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 import type { NodeProps } from 'reactflow';
@@ -14,7 +14,7 @@ const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
 
   const hasTemplateSelector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ nodeTemplates }) =>
+      createMemoizedSelector(selectNodeTemplatesSlice, (nodeTemplates) =>
         Boolean(nodeTemplates.templates[type])
       ),
     [type]

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx

@@ -1,5 +1,4 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
 import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
@@ -10,6 +9,7 @@ import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind';
 import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
 import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
 import {
+  selectWorkflowSlice,
   workflowExposedFieldAdded,
   workflowExposedFieldRemoved,
 } from 'features/nodes/store/workflowSlice';
@@ -38,7 +38,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
 
   const selector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ workflow }) => {
+      createMemoizedSelector(selectWorkflowSlice, (workflow) => {
         const isExposed = Boolean(
           workflow.exposedFields.find(
             (f) => f.nodeId === nodeId && f.fieldName === fieldName

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx

@@ -26,7 +26,7 @@ const ImageFieldInputComponent = (
 ) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
-  const isConnected = useAppSelector((state) => state.system.isConnected);
+  const isConnected = useAppSelector((s) => s.system.isConnected);
   const { currentData: imageDTO, isError } = useGetImageDTOQuery(
     field.value?.image_name ?? skipToken
   );

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -1,12 +1,11 @@
 import type { ChakraProps } from '@chakra-ui/react';
 import { Box, useToken } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
-import { nodeExclusivelySelected } from 'features/nodes/store/nodesSlice';
+import { nodeExclusivelySelected , selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import {
   DRAG_HANDLE_CLASSNAME,
   NODE_WIDTH,
@@ -29,8 +28,8 @@ const NodeWrapper = (props: NodeWrapperProps) => {
   const selectIsInProgress = useMemo(
     () =>
       createMemoizedSelector(
-        stateSelector,
-        ({ nodes }) =>
+        selectNodesSlice,
+        (nodes) =>
           nodes.nodeExecutionStates[nodeId]?.status ===
           zNodeStatus.enum.IN_PROGRESS
       ),
@@ -47,7 +46,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
 
   const dispatch = useAppDispatch();
 
-  const opacity = useAppSelector((state) => state.nodes.nodeOpacity);
+  const opacity = useAppSelector((s) => s.nodes.nodeOpacity);
   const { onCloseGlobal } = useGlobalMenuCloseTrigger();
 
   const handleClick = useCallback(

invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 const NodeOpacitySlider = () => {
   const dispatch = useAppDispatch();
-  const nodeOpacity = useAppSelector((state) => state.nodes.nodeOpacity);
+  const nodeOpacity = useAppSelector((s) => s.nodes.nodeOpacity);
   const { t } = useTranslation();
 
   const handleChange = useCallback(

invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx

@@ -20,10 +20,10 @@ const ViewportControls = () => {
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const dispatch = useAppDispatch();
   // const shouldShowFieldTypeLegend = useAppSelector(
-  //   (state) => state.nodes.shouldShowFieldTypeLegend
+  //   (s) => s.nodes.shouldShowFieldTypeLegend
   // );
   const shouldShowMinimapPanel = useAppSelector(
-    (state) => state.nodes.shouldShowMinimapPanel
+    (s) => s.nodes.shouldShowMinimapPanel
   );
 
   const handleClickedZoomIn = useCallback(() => {

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 const TopCenterPanel = () => {
   const { t } = useTranslation();
-  const name = useAppSelector((state) => state.workflow.name);
-  const isTouched = useAppSelector((state) => state.workflow.isTouched);
+  const name = useAppSelector((s) => s.workflow.name);
+  const isTouched = useAppSelector((s) => s.workflow.isTouched);
   const isWorkflowLibraryEnabled =
     useFeatureStatus('workflowLibrary').isFeatureEnabled;