redux toolkit config

config.ts

import { TypedUseSelectorHook, useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { save, load } from 'redux-localstorage-simple';
import { coingeckoApi } from '../api-services';
import connectionReducer from './connection';
import currencyReducer from './currency';
import { useConnectionHandlers } from './connection/hooks';
import { useCurrencyHandlers } from './currency/hooks';

const PERSISTED_KEYS: string[] = ['currency'];

const store = configureStore({
  reducer: {
    connection: connectionReducer,
    currency: currencyReducer,
    [coingeckoApi.reducerPath]: coingeckoApi.reducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({ thunk: true, serializableCheck: false })
      .concat(coingeckoApi.middleware)
      .concat(save({ states: PERSISTED_KEYS, debounce: 1000 })),
  preloadedState: load({ states: PERSISTED_KEYS }),
});

export type AppState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useDispatch = () => useReduxDispatch<AppDispatch>();
export const useSelector: TypedUseSelectorHook<AppState> = useReduxSelector;

export const useAppState = () => {
  const coingeckoApiState: AppState[typeof coingeckoApi.reducerPath] = useSelector(state => state.coingeckoApi);
  const connectionState: AppState['connection'] = useSelector(state => state.connection);
  const currencyState: AppState['currency'] = useSelector(state => state.currency);
  return { ...coingeckoApiState, ...connectionState, ...currencyState };
};

export const useAppHandlers = () => {
  const connectionHandlers = useConnectionHandlers();
  const currencyHandlers = useCurrencyHandlers();
  return { ...connectionHandlers, ...currencyHandlers };
};

export default store;