dynamically create indexedDB store using unique store key if available

This commit is contained in:
Mary Hipp 2023-11-30 11:47:27 -05:00 committed by psychedelicious
parent aadcde3edd
commit e6fe2540b8
2 changed files with 61 additions and 51 deletions

View File

@ -7,7 +7,8 @@ import { $headerComponent } from 'app/store/nanostores/headerComponent';
import { $isDebugging } from 'app/store/nanostores/isDebugging'; import { $isDebugging } from 'app/store/nanostores/isDebugging';
import { $projectId } from 'app/store/nanostores/projectId'; import { $projectId } from 'app/store/nanostores/projectId';
import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId'; import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
import { store } from 'app/store/store'; import { $store } from 'app/store/nanostores/store';
import { createStore } from 'app/store/store';
import { PartialAppConfig } from 'app/types/invokeai'; import { PartialAppConfig } from 'app/types/invokeai';
import Loading from 'common/components/Loading/Loading'; import Loading from 'common/components/Loading/Loading';
import AppDndContext from 'features/dnd/components/AppDndContext'; import AppDndContext from 'features/dnd/components/AppDndContext';
@ -18,6 +19,7 @@ import React, {
lazy, lazy,
memo, memo,
useEffect, useEffect,
useMemo,
} from 'react'; } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'; import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@ -137,6 +139,14 @@ const InvokeAIUI = ({
}; };
}, [isDebugging]); }, [isDebugging]);
const store = useMemo(() => {
return createStore(projectId);
}, [projectId]);
useEffect(() => {
$store.set(store);
}, [store]);
return ( return (
<React.StrictMode> <React.StrictMode>
<Provider store={store}> <Provider store={store}>

View File

@ -32,7 +32,6 @@ import { actionSanitizer } from './middleware/devtools/actionSanitizer';
import { actionsDenylist } from './middleware/devtools/actionsDenylist'; import { actionsDenylist } from './middleware/devtools/actionsDenylist';
import { stateSanitizer } from './middleware/devtools/stateSanitizer'; import { stateSanitizer } from './middleware/devtools/stateSanitizer';
import { listenerMiddleware } from './middleware/listenerMiddleware'; import { listenerMiddleware } from './middleware/listenerMiddleware';
import { $store } from './nanostores/store';
import { createStore as createIDBKeyValStore, get, set } from 'idb-keyval'; import { createStore as createIDBKeyValStore, get, set } from 'idb-keyval';
const allReducers = { const allReducers = {
@ -84,7 +83,8 @@ const idbKeyValDriver: Driver = {
setItem: (key, value) => set(key, value, idbKeyValStore), setItem: (key, value) => set(key, value, idbKeyValStore),
}; };
export const store = configureStore({ export const createStore = (uniqueStoreKey?: string) =>
configureStore({
reducer: rememberedRootReducer, reducer: rememberedRootReducer,
enhancers: (existingEnhancers) => { enhancers: (existingEnhancers) => {
return existingEnhancers return existingEnhancers
@ -93,7 +93,9 @@ export const store = configureStore({
persistDebounce: 300, persistDebounce: 300,
serialize, serialize,
unserialize, unserialize,
prefix: STORAGE_PREFIX, prefix: uniqueStoreKey
? `${STORAGE_PREFIX}-${uniqueStoreKey}-`
: STORAGE_PREFIX,
}) })
) )
.concat(autoBatchEnhancer()); .concat(autoBatchEnhancer());
@ -131,10 +133,8 @@ export const store = configureStore({
}, },
}); });
export type AppGetState = typeof store.getState; export type RootState = ReturnType<typeof rootReducer>;
export type RootState = ReturnType<typeof store.getState>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>; export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>;
export type AppDispatch = typeof store.dispatch; export type AppDispatch = ReturnType<typeof configureStore>['dispatch'];
export const stateSelector = (state: RootState) => state; export const stateSelector = (state: RootState) => state;
$store.set(store);