fix store reference

Author: KrumTy

redisinsight/ui/src/slices/store-dynamic.ts

@@ -1,23 +1,31 @@
-/* eslint-disable global-require */
 import type { RootState, AppDispatch } from './store'
 
-// Importing store methods dynamically to avoid circular dependencies
+// Lazy reference to avoid circular dependencies
+// The store will be set by the store module itself after it's created
+let storeRef: { getState: () => RootState; dispatch: AppDispatch } | null = null
+
+// This function will be called by the store modules to set the reference
+export const setStoreRef = (store: { getState: () => RootState; dispatch: AppDispatch }) => {
+  storeRef = store
+}
 
 const getState = (): RootState => {
-  const { store } = require('uiSrc/slices/store')
-  return store.getState() as RootState
+  if (!storeRef) {
+    throw new Error('Store not initialized. Make sure store-dynamic is imported after store creation.')
+  }
+  return storeRef.getState()
 }
 
 const dispatch: AppDispatch = (action: any) => {
-  const { store } = require('uiSrc/slices/store')
-  return store.dispatch(action)
+  if (!storeRef) {
+    throw new Error('Store not initialized. Make sure store-dynamic is imported after store creation.')
+  }
+  return storeRef.dispatch(action)
 }
 
-const store = {
+export const store = {
   getState,
   dispatch,
 }
 
-export { store }
-
-export { RootState, AppDispatch }
+export type { RootState, AppDispatch }

redisinsight/ui/src/slices/store.ts

@@ -56,6 +56,7 @@ import rdiStatisticsReducer from './rdi/statistics'
 import aiAssistantReducer from './panels/aiAssistant'
 import appDbSettingsReducer from './app/db-settings'
 import tagsReducer from './instances/tags'
+import { setStoreRef } from './store-dynamic'
 
 const riConfig = getConfig()
 
@@ -148,6 +149,7 @@ const store = configureStore({
     getDefaultMiddleware({ serializableCheck: false }),
   devTools: riConfig.app.env !== 'production',
 })
+setStoreRef(store)
 
 export { store }
 

redisinsight/ui/src/utils/test-utils.tsx

@@ -16,6 +16,7 @@ import { ThemeProvider } from 'styled-components'
 import { themeLight } from '@redis-ui/styles'
 import userEvent from '@testing-library/user-event'
 import type { RootState, ReduxStore } from 'uiSrc/slices/store'
+import { setStoreRef } from 'uiSrc/slices/store-dynamic'
 import { initialState as initialStateInstances } from 'uiSrc/slices/instances/instances'
 import { initialState as initialStateTags } from 'uiSrc/slices/instances/tags'
 import { initialState as initialStateCaCerts } from 'uiSrc/slices/instances/caCerts'
@@ -168,6 +169,10 @@ export const mockStore = configureMockStore<RootState>([thunk])
 export const mockedStore = mockStore(initialStateDefault)
 export const mockedStoreFn = () => mockStore(initialStateDefault)
 
+// Set the mock store reference for the dynamic store wrapper
+// This ensures that store-dynamic works correctly in tests
+setStoreRef(mockedStore as any)
+
 // insert root state to the render Component
 const render = (
   ui: JSX.Element,
@@ -178,6 +183,11 @@ const render = (
     ...renderOptions
   }: Options = initialStateDefault,
 ) => {
+  // Set the store reference for the dynamic store wrapper if a custom store is provided
+  if (store !== mockedStore) {
+    setStoreRef(store as any)
+  }
+
   const Wrapper = ({ children }: { children: JSX.Element }) => (
     <ThemeProvider theme={themeLight}>
       <Provider store={store}>{children}</Provider>
@@ -198,6 +208,11 @@ const renderHook = (
     ...renderOptions
   }: Options = initialStateDefault,
 ) => {
+  // Set the store reference for the dynamic store wrapper if a custom store is provided
+  if (store !== mockedStore) {
+    setStoreRef(store as any)
+  }
+
   const Wrapper = ({ children }: { children: JSX.Element }) => (
     <Provider store={store}>{children}</Provider>
   )