import {
  configureStore,
  ThunkAction,
  Action,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  useDispatch as useDispatchUntyped,
  useSelector as useSelectorUntyped,
  TypedUseSelectorHook,
} from 'react-redux';
import counter from '../features/counter/counterSlice';
import file from '../features/loader/fileSlice';
import renderer from '../features/canvas/rendererSlice';

export const store = configureStore({
  reducer: {
    counter,
    file,
    renderer,
  },
  middleware: getDefaultMiddleware({
    immutableCheck: false,
    serializableCheck: false,
  }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;
export const useSelector: TypedUseSelectorHook<RootState> = useSelectorUntyped;
export const useDispatch = () => useDispatchUntyped<typeof store.dispatch>();
