github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 15:04:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): use redux-provided hooks for accessing store

Browse Source
This commit is contained in:
psychedelicious
2025-06-30 14:53:45 +10:00
parent 7636007349
commit b113c57fc4
35 changed files with 46 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/app/store/nanostores/store.ts
View File

@@ -1,4 +1,3 @@
import { useStore } from '@nanostores/react';
import type { AppStore } from 'app/store/store';
import { atom } from 'nanostores';
@@ -32,11 +31,3 @@ export const getStore = () => {
}
return store;
};
export const useAppStore = () => {
const store = useStore($store);
if (!store) {
throw new ReduxStoreNotInitialized();
}
return store;
};

2
invokeai/frontend/web/src/app/store/use-debounced-app-selector.ts
View File

@@ -1,5 +1,5 @@
import type { Selector } from '@reduxjs/toolkit';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import type { RootState } from 'app/store/store';
import { useEffect, useState } from 'react';

2
invokeai/frontend/web/src/common/hooks/usePersistedTextareaSize.ts
View File

@@ -1,4 +1,4 @@
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { debounce } from 'es-toolkit/compat';
import type { Dimensions } from 'features/controlLayers/store/types';
import { selectUiSlice, textAreaSizesStateChanged } from 'features/ui/store/uiSlice';

2
invokeai/frontend/web/src/features/controlLayers/components/CanvasPasteModal.tsx
View File

@@ -10,7 +10,7 @@ import {
ModalOverlay,
} from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';

2
invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx
View File

@@ -1,6 +1,6 @@
import { Flex, IconButton } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';

2
invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Flex, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { usePullBboxIntoLayer } from 'features/controlLayers/hooks/saveCanvasHooks';

2
invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Collapse, Divider, Flex } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { RefImagePreview } from 'features/controlLayers/components/RefImage/RefImagePreview';

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/ImageActions.tsx
View File

@@ -1,6 +1,6 @@
import type { ButtonGroupProps } from '@invoke-ai/ui-library';
import { Button, ButtonGroup } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { newCanvasFromImage } from 'features/imageActions/actions';
import { memo, useCallback } from 'react';
import type { ImageDTO } from 'services/api/types';

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx
View File

@@ -1,5 +1,5 @@
import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton';
import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx
View File

@@ -1,5 +1,5 @@
import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton';
import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx
View File

@@ -1,5 +1,5 @@
import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';
import { DndDropTarget } from 'features/dnd/DndDropTarget';

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx
View File

@@ -1,7 +1,7 @@
import { useStore } from '@nanostores/react';
import { createSelector } from '@reduxjs/toolkit';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { buildZodTypeGuard } from 'common/util/zodUtils';
import { getOutputImageName } from 'features/controlLayers/components/SimpleSession/shared';
import type { ProgressImage } from 'features/nodes/types/common';

2
invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx
View File

@@ -1,6 +1,6 @@
import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';

2
invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts
View File

@@ -1,6 +1,6 @@
import { createSelector } from '@reduxjs/toolkit';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import type { AppGetState } from 'app/store/store';
import { useAppDispatch } from 'app/store/storeHooks';
import { deepClone } from 'common/util/deepClone';

2
invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts
View File

@@ -1,6 +1,6 @@
import { useStore } from '@nanostores/react';
import { logger } from 'app/logging/logger';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { $canvasManager } from 'features/controlLayers/store/ephemeral';

2
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
View File

@@ -1,5 +1,5 @@
import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import ImageUsageMessage from 'features/deleteImageModal/components/ImageUsageMessage';
import { useDeleteImageModalApi, useDeleteImageModalState } from 'features/deleteImageModal/store/state';

25
invokeai/frontend/web/src/features/deleteImageModal/store/state.ts
View File

@@ -1,6 +1,6 @@
import { useStore } from '@nanostores/react';
import { getStore, useAppStore } from 'app/store/nanostores/store';
import type { AppDispatch, AppGetState, RootState } from 'app/store/store';
import type { AppDispatch, AppStore, RootState } from 'app/store/store';
import { useAppStore } from 'app/store/storeHooks';
import { forEach, intersection, some } from 'es-toolkit/compat';
import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
import {
@@ -52,14 +52,14 @@ const getInitialState = (): DeleteImagesModalState => ({
const $deleteModalState = atom<DeleteImagesModalState>(getInitialState());
const deleteImagesWithDialog = async (image_names: string[]): Promise<void> => {
const { getState, dispatch } = getStore();
const deleteImagesWithDialog = async (image_names: string[], store: AppStore): Promise<void> => {
const { getState } = store;
const imageUsage = getImageUsageFromImageNames(image_names, getState());
const shouldConfirmOnDelete = selectSystemShouldConfirmOnDelete(getState());
if (!shouldConfirmOnDelete && !isAnyImageInUse(imageUsage)) {
// If we don't need to confirm and the images are not in use, delete them directly
await handleDeletions(image_names, dispatch, getState);
await handleDeletions(image_names, store);
}
return new Promise<void>((resolve, reject) => {
@@ -74,8 +74,9 @@ const deleteImagesWithDialog = async (image_names: string[]): Promise<void> => {
});
};
const handleDeletions = async (image_names: string[], dispatch: AppDispatch, getState: AppGetState) => {
const handleDeletions = async (image_names: string[], store: AppStore) => {
try {
const { dispatch, getState } = store;
const state = getState();
await dispatch(imagesApi.endpoints.deleteImages.initiate({ image_names }, { track: false })).unwrap();
@@ -96,9 +97,9 @@ const handleDeletions = async (image_names: string[], dispatch: AppDispatch, get
}
};
const confirmDeletion = async (dispatch: AppDispatch, getState: AppGetState) => {
const confirmDeletion = async (store: AppStore) => {
const state = $deleteModalState.get();
await handleDeletions(state.image_names, dispatch, getState);
await handleDeletions(state.image_names, store);
state.resolve?.();
closeSilently();
};
@@ -119,16 +120,16 @@ export const useDeleteImageModalState = () => {
};
export const useDeleteImageModalApi = () => {
const { dispatch, getState } = useAppStore();
const store = useAppStore();
const api = useMemo(
() => ({
delete: deleteImagesWithDialog,
confirm: () => confirmDeletion(dispatch, getState),
delete: (image_names: string[]) => deleteImagesWithDialog(image_names, store),
confirm: () => confirmDeletion(store),
cancel: cancelDeletion,
close: closeSilently,
getUsageSummary: getImageUsageSummary,
}),
[dispatch, getState]
[store]
);
return api;

2
invokeai/frontend/web/src/features/dnd/DndImage.tsx
View File

@@ -2,7 +2,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import type { ImageProps, SystemStyleObject } from '@invoke-ai/ui-library';
import { Image } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { singleImageDndSource } from 'features/dnd/dnd';
import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage';
import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage';

2
invokeai/frontend/web/src/features/dynamicPrompts/hooks/useDynamicPromptsWatcher.tsx
View File

@@ -1,4 +1,4 @@
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { debounce } from 'es-toolkit/compat';
import {

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewCanvasFromImageSubMenu.tsx
View File

@@ -1,5 +1,5 @@
import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewLayerFromImageSubMenu.tsx
View File

@@ -1,5 +1,5 @@
import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemUseAsRefImage.tsx
View File

@@ -1,5 +1,5 @@
import { MenuItem } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
import { refImageAdded } from 'features/controlLayers/store/refImagesSlice';
import { imageDTOToImageWithDims } from 'features/controlLayers/store/util';

2
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@@ -3,7 +3,7 @@ import { draggable, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, Flex, Icon, Image } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import type { AppDispatch, AppGetState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { uniq } from 'es-toolkit';

2
invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
View File

@@ -1,6 +1,6 @@
import { useStore } from '@nanostores/react';
import { adHocPostProcessingRequested } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { useDeleteImageModalApi } from 'features/deleteImageModal/store/state';

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx
View File

@@ -10,7 +10,7 @@ import {
IconButton,
} from '@invoke-ai/ui-library';
import { NUMPY_RAND_MAX } from 'app/constants';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
import { isNil } from 'es-toolkit/compat';
import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
View File

@@ -1,6 +1,6 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, Flex, Grid, GridItem } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
import { UploadMultipleImageButton } from 'common/hooks/useImageUploadButton';

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent.tsx
View File

@@ -10,7 +10,7 @@ import {
IconButton,
} from '@invoke-ai/ui-library';
import { NUMPY_RAND_MAX } from 'app/constants';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
import { isNil } from 'es-toolkit/compat';
import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx
View File

@@ -1,6 +1,6 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Button, Divider, Flex, Grid, GridItem, IconButton, Input, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
import { fieldStringCollectionValueChanged } from 'features/nodes/store/nodesSlice';

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilderMenu.tsx
View File

@@ -1,5 +1,5 @@
import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useResetAllNodeFields } from 'features/nodes/components/sidePanel/builder/use-reset-all-node-fields';
import { formReset } from 'features/nodes/store/nodesSlice';
import { memo, useCallback } from 'react';

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts
View File

@@ -9,7 +9,7 @@ import {
import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
import { logger } from 'app/logging/logger';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-reset-all-node-fields.ts
View File

@@ -1,4 +1,4 @@
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { fieldValueReset } from 'features/nodes/store/nodesSlice';
import { selectFormInitialValues, selectNodeFieldElements } from 'features/nodes/store/selectors';
import { useCallback } from 'react';

2
invokeai/frontend/web/src/features/queue/hooks/useEnqueueWorkflows.ts
View File

@@ -1,5 +1,5 @@
import { createAction } from '@reduxjs/toolkit';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { groupBy } from 'es-toolkit/compat';
import {
$outputNodeId,

2
invokeai/frontend/web/src/features/queue/store/readiness.ts
View File

@@ -1,7 +1,7 @@
import { useStore } from '@nanostores/react';
import { createSelector } from '@reduxjs/toolkit';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { $false } from 'app/store/nanostores/util';
import type { AppDispatch, AppStore } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';

2
invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetFormInitialValues.ts
View File

@@ -1,4 +1,4 @@
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { getFormFieldInitialValues as _getFormFieldInitialValues } from 'features/nodes/store/nodesSlice';
import { selectNodesSlice } from 'features/nodes/store/selectors';
import { useCallback } from 'react';

2
invokeai/frontend/web/src/services/events/useSocketIO.ts
View File

@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
import { $authToken } from 'app/store/nanostores/authToken';
import { $baseUrl } from 'app/store/nanostores/baseUrl';
import { $isDebugging } from 'app/store/nanostores/isDebugging';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import type { MapStore } from 'nanostores';
import { useEffect, useMemo } from 'react';