paramsSlice refactored

Author: Attila Cseh

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -3,18 +3,19 @@ import type { PropsWithChildren } from 'react';
 import { memo, useEffect } from 'react';
 
 import { useAppDispatch } from '../src/app/store/storeHooks';
-import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
+import { modelChanged } from 'features/controlLayers/store/actions';
+import { useParamsDispatch } from 'features/controlLayers/store/paramsSlice';
 /**
  * Initializes some state for storybook. Must be in a different component
  * so that it is run inside the redux context.
  */
 export const ReduxInit = memo(({ children }: PropsWithChildren) => {
-  const dispatch = useAppDispatch();
+  const dispatch = useParamsDispatch();
   useGlobalModifiersInit();
   useEffect(() => {
-    dispatch(
-      modelChanged({ model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' } })
-    );
+    dispatch(modelChanged, {
+      model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' },
+    });
   }, [dispatch]);
 
   return children;

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts

@@ -1,20 +1,21 @@
 import type { AppStartListening } from 'app/store/store';
-import { setInfillMethod } from 'features/controlLayers/store/paramsSlice';
+import { paramsDispatch, selectActiveParams, setInfillMethod } from 'features/controlLayers/store/paramsSlice';
 import { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged } from 'features/system/store/systemSlice';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 
 export const addAppConfigReceivedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: appInfoApi.endpoints.getAppConfig.matchFulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action, api) => {
+      const { getState, dispatch } = api;
       const { infill_methods = [], nsfw_methods = [], watermarking_methods = [] } = action.payload;
-      const infillMethod = getState().params.infillMethod;
+      const infillMethod = selectActiveParams(getState()).infillMethod;
 
       if (!infill_methods.includes(infillMethod)) {
         // If the selected infill method does not exist, prefer 'lama' if it's in the list, otherwise 'tile'.
         // TODO(psyche): lama _should_ always be in the list, but the API doesn't guarantee it...
         const infillMethod = infill_methods.includes('lama') ? 'lama' : 'tile';
-        dispatch(setInfillMethod(infillMethod));
+        paramsDispatch(api, setInfillMethod, infillMethod);
       }
 
       if (!nsfw_methods.includes('nsfw_checker')) {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -1,12 +1,18 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/store';
+import { modelChanged } from 'features/controlLayers/store/actions';
 import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
 import {
   buildSelectIsStagingBySessionId,
   selectActiveCanvasSessionId,
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraIsEnabledChanged } from 'features/controlLayers/store/lorasSlice';
-import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
+import {
+  paramsDispatch,
+  selectActiveParams,
+  syncedToOptimalDimension,
+  vaeSelected,
+} from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
 import {
   selectActiveCanvas,
@@ -34,7 +40,8 @@ const log = logger('models');
 export const addModelSelectedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: modelSelected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action, api) => {
+      const { getState, dispatch } = api;
       const state = getState();
       const result = zParameterModel.safeParse(action.payload);
 
@@ -45,7 +52,8 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
 
       const newModel = result.data;
       const newBase = newModel.base;
-      const didBaseModelChange = state.params.model?.base !== newBase;
+      const params = selectActiveParams(state);
+      const didBaseModelChange = params.model?.base !== newBase;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
@@ -60,9 +68,9 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         });
 
         // handle incompatible vae
-        const { vae } = state.params;
+        const { vae } = params;
         if (vae && vae.base !== newBase) {
-          dispatch(vaeSelected(null));
+          paramsDispatch(api, vaeSelected, null);
           modelsUpdatedDisabledOrCleared += 1;
         }
 
@@ -155,13 +163,13 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         }
       }
 
-      dispatch(modelChanged({ model: newModel, previousModel: state.params.model }));
+      paramsDispatch(api, modelChanged, { model: newModel, previousModel: params.model });
 
       const modelBase = selectBboxModelBase(state);
 
-      if (modelBase !== state.params.model?.base) {
+      if (modelBase !== params.model?.base) {
         // Sync generate tab settings whenever the model base changes
-        dispatch(syncedToOptimalDimension());
+        paramsDispatch(api, syncedToOptimalDimension);
         const sessionId = selectActiveCanvasSessionId(state);
         const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
         const isStaging = selectIsStaging(state);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -1,13 +1,16 @@
 import { logger } from 'app/logging/logger';
 import type { AppDispatch, AppStartListening, RootState } from 'app/store/store';
+import { modelChanged } from 'features/controlLayers/store/actions';
 import { controlLayerModelChanged, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
 import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import {
   clipEmbedModelSelected,
   fluxVAESelected,
-  modelChanged,
+  paramsDispatch,
   refinerModelChanged,
+  selectActiveParams,
   t5EncoderModelSelected,
+  toStore,
   vaeSelected,
 } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
@@ -103,7 +106,7 @@ type ModelHandler = (
 ) => undefined;
 
 const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedMainModel = state.params.model;
+  const selectedMainModel = selectActiveParams(state).model;
   const allMainModels = models.filter(isNonRefinerMainModelConfig).sort((a) => (a.base === 'sdxl' ? -1 : 1));
 
   const firstModel = allMainModels[0];
@@ -113,7 +116,7 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
     // Only clear the model if we have one currently selected
     if (selectedMainModel !== null) {
       log.debug({ selectedMainModel }, 'No main models available, clearing');
-      dispatch(modelChanged({ model: null }));
+      paramsDispatch(toStore(state, dispatch), modelChanged, { model: null });
     }
     return;
   }
@@ -144,7 +147,7 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
 };
 
 const handleRefinerModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedRefinerModel = state.params.refinerModel;
+  const selectedRefinerModel = selectActiveParams(state).refinerModel;
 
   // `null` is a valid refiner model - no need to do anything.
   if (selectedRefinerModel === null) {
@@ -163,12 +166,12 @@ const handleRefinerModels: ModelHandler = (models, state, dispatch, log) => {
 
   // Else, we need to clear the refiner model
   log.debug({ selectedRefinerModel }, 'Selected refiner model is not available, clearing');
-  dispatch(refinerModelChanged(null));
+  paramsDispatch(toStore(state, dispatch), refinerModelChanged, null);
   return;
 };
 
 const handleVAEModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedVAEModel = state.params.vae;
+  const selectedVAEModel = selectActiveParams(state).vae;
 
   // `null` is a valid VAE - it means "use the VAE baked into the currently-selected main model"
   if (selectedVAEModel === null) {
@@ -187,7 +190,7 @@ const handleVAEModels: ModelHandler = (models, state, dispatch, log) => {
 
   // Else, we need to clear the VAE model
   log.debug({ selectedVAEModel }, 'Selected VAE model is not available, clearing');
-  dispatch(vaeSelected(null));
+  paramsDispatch(toStore(state, dispatch), vaeSelected, null);
   return;
 };
 
@@ -417,7 +420,7 @@ const handleTileControlNetModel: ModelHandler = (models, state, dispatch, log) =
 };
 
 const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedT5EncoderModel = state.params.t5EncoderModel;
+  const selectedT5EncoderModel = selectActiveParams(state).t5EncoderModel;
   const t5EncoderModels = models.filter((m) => isT5EncoderModelConfig(m));
 
   // If the currently selected model is available, we don't need to do anything
@@ -432,20 +435,20 @@ const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedT5EncoderModel, firstModel },
       'No selected T5 encoder model or selected T5 encoder model is not available, selecting first available model'
     );
-    dispatch(t5EncoderModelSelected(zParameterT5EncoderModel.parse(firstModel)));
+    paramsDispatch(toStore(state, dispatch), t5EncoderModelSelected, zParameterT5EncoderModel.parse(firstModel));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedT5EncoderModel) {
     log.debug({ selectedT5EncoderModel }, 'Selected T5 encoder model is not available, clearing');
-    dispatch(t5EncoderModelSelected(null));
+    paramsDispatch(toStore(state, dispatch), t5EncoderModelSelected, null);
     return;
   }
 };
 
 const handleCLIPEmbedModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedCLIPEmbedModel = state.params.clipEmbedModel;
+  const selectedCLIPEmbedModel = selectActiveParams(state).clipEmbedModel;
   const CLIPEmbedModels = models.filter((m) => isCLIPEmbedModelConfig(m));
 
   // If the currently selected model is available, we don't need to do anything
@@ -460,20 +463,20 @@ const handleCLIPEmbedModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedCLIPEmbedModel, firstModel },
       'No selected CLIP embed model or selected CLIP embed model is not available, selecting first available model'
     );
-    dispatch(clipEmbedModelSelected(zParameterCLIPEmbedModel.parse(firstModel)));
+    paramsDispatch(toStore(state, dispatch), clipEmbedModelSelected, zParameterCLIPEmbedModel.parse(firstModel));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedCLIPEmbedModel) {
     log.debug({ selectedCLIPEmbedModel }, 'Selected CLIP embed model is not available, clearing');
-    dispatch(clipEmbedModelSelected(null));
+    paramsDispatch(toStore(state, dispatch), clipEmbedModelSelected, null);
     return;
   }
 };
 
 const handleFLUXVAEModels: ModelHandler = (models, state, dispatch, log) => {
-  const selectedFLUXVAEModel = state.params.fluxVAE;
+  const selectedFLUXVAEModel = selectActiveParams(state).fluxVAE;
   const fluxVAEModels = models.filter((m) => isFluxVAEModelConfig(m));
 
   // If the currently selected model is available, we don't need to do anything
@@ -488,14 +491,14 @@ const handleFLUXVAEModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedFLUXVAEModel, firstModel },
       'No selected FLUX VAE model or selected FLUX VAE model is not available, selecting first available model'
     );
-    dispatch(fluxVAESelected(zParameterVAEModel.parse(firstModel)));
+    paramsDispatch(toStore(state, dispatch), fluxVAESelected, zParameterVAEModel.parse(firstModel));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedFLUXVAEModel) {
     log.debug({ selectedFLUXVAEModel }, 'Selected FLUX VAE model is not available, clearing');
-    dispatch(fluxVAESelected(null));
+    paramsDispatch(toStore(state, dispatch), fluxVAESelected, null);
     return;
   }
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts

@@ -7,6 +7,8 @@ import {
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
+  paramsDispatch,
+  selectActiveParams,
   setCfgRescaleMultiplier,
   setCfgScale,
   setGuidance,
@@ -37,10 +39,11 @@ import { isNonRefinerMainModelConfig } from 'services/api/types';
 export const addSetDefaultSettingsListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: setDefaultSettings,
-    effect: async (action, { dispatch, getState }) => {
+    effect: async (action, api) => {
+      const { dispatch, getState } = api;
       const state = getState();
 
-      const currentModel = state.params.model;
+      const currentModel = selectActiveParams(state).model;
 
       if (!currentModel) {
         return;
@@ -64,56 +67,56 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
           // we store this as "default" within default settings
           // to distinguish it from no default set
           if (vae === 'default') {
-            dispatch(vaeSelected(null));
+            paramsDispatch(api, vaeSelected, null);
           } else {
             const vaeModel = models.find((model) => model.key === vae);
             const result = zParameterVAEModel.safeParse(vaeModel);
             if (!result.success) {
               return;
             }
-            dispatch(vaeSelected(result.data));
+            paramsDispatch(api, vaeSelected, result.data);
           }
         }
 
         if (vae_precision) {
           if (isParameterPrecision(vae_precision)) {
-            dispatch(vaePrecisionChanged(vae_precision));
+            paramsDispatch(api, vaePrecisionChanged, vae_precision);
           }
         }
 
         if (guidance) {
           if (isParameterGuidance(guidance)) {
-            dispatch(setGuidance(guidance));
+            paramsDispatch(api, setGuidance, guidance);
           }
         }
 
         if (cfg_scale) {
           if (isParameterCFGScale(cfg_scale)) {
-            dispatch(setCfgScale(cfg_scale));
+            paramsDispatch(api, setCfgScale, cfg_scale);
           }
         }
 
         if (!isNil(cfg_rescale_multiplier)) {
           if (isParameterCFGRescaleMultiplier(cfg_rescale_multiplier)) {
-            dispatch(setCfgRescaleMultiplier(cfg_rescale_multiplier));
+            paramsDispatch(api, setCfgRescaleMultiplier, cfg_rescale_multiplier);
           }
         } else {
           // Set this to 0 if it doesn't have a default. This value is
           // easy to miss in the UI when users are resetting defaults
           // and leaving it non-zero could lead to detrimental
           // effects.
-          dispatch(setCfgRescaleMultiplier(0));
+          paramsDispatch(api, setCfgRescaleMultiplier, 0);
         }
 
         if (steps) {
           if (isParameterSteps(steps)) {
-            dispatch(setSteps(steps));
+            paramsDispatch(api, setSteps, steps);
           }
         }
 
         if (scheduler) {
           if (isParameterScheduler(scheduler)) {
-            dispatch(setScheduler(scheduler));
+            paramsDispatch(api, setScheduler, scheduler);
           }
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
@@ -125,10 +128,10 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {
           if (isParameterWidth(width)) {
-            dispatch(widthChanged({ width, ...setSizeOptions }));
+            paramsDispatch(api, widthChanged, { width, ...setSizeOptions });
           }
           if (isParameterHeight(height)) {
-            dispatch(heightChanged({ height, ...setSizeOptions }));
+            paramsDispatch(api, heightChanged, { height, ...setSizeOptions });
           }
         }
 

invokeai/frontend/web/src/app/store/store.ts

@@ -25,7 +25,7 @@ import { canvasSettingsReducer, canvasSettingsSliceConfig } from 'features/contr
 import { canvasSliceConfig, migrateCanvas, undoableCanvasesReducer } from 'features/controlLayers/store/canvasSlice';
 import { canvasSessionSliceConfig } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { lorasSliceConfig } from 'features/controlLayers/store/lorasSlice';
-import { paramsSliceConfig } from 'features/controlLayers/store/paramsSlice';
+import { paramsSliceConfig, paramsSliceReducer } from 'features/controlLayers/store/paramsSlice';
 import { refImagesSliceConfig } from 'features/controlLayers/store/refImagesSlice';
 import { dynamicPromptsSliceConfig } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { gallerySliceConfig } from 'features/gallery/store/gallerySlice';
@@ -98,7 +98,7 @@ const ALL_REDUCERS = {
   [lorasSliceConfig.slice.reducerPath]: lorasSliceConfig.slice.reducer,
   [modelManagerSliceConfig.slice.reducerPath]: modelManagerSliceConfig.slice.reducer,
   [nodesSliceConfig.slice.reducerPath]: undoableNodesSliceReducer,
-  [paramsSliceConfig.slice.reducerPath]: paramsSliceConfig.slice.reducer,
+  [paramsSliceConfig.slice.reducerPath]: paramsSliceReducer,
   [queueSliceConfig.slice.reducerPath]: queueSliceConfig.slice.reducer,
   [refImagesSliceConfig.slice.reducerPath]: refImagesSliceConfig.slice.reducer,
   [stylePresetSliceConfig.slice.reducerPath]: stylePresetSliceConfig.slice.reducer,