feat: use rtk to init store and add typed dispatch

package.json

@@ -20,6 +20,7 @@
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.2.0",
     "@gravity-ui/uikit": "^5.30.1",
+    "@reduxjs/toolkit": "^2.2.1",
     "axios": "^0.21.2",
     "bem-cn-lite": "^4.1.0",
     "copy-to-clipboard": "^3.3.3",
@@ -31,18 +32,16 @@
     "path-to-regexp": "^3.0.0",
     "qs": "^6.11.0",
     "react-error-boundary": "^4.0.12",
-    "react-json-inspector": "^7.1.1",
     "react-helmet-async": "2.0.4",
+    "react-json-inspector": "^7.1.1",
     "react-list": "^0.8.11",
     "react-monaco-editor": "^0.47.0",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-split": "^2.0.14",
-    "redux": "^4.0.1",
-    "redux-location-state": "^2.6.0",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.1.6",
+    "redux": "^5.0.1",
+    "redux-location-state": "^2.8.2",
     "url": "^0.11.0",
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
@@ -157,6 +156,6 @@
   "overrides": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "redux": "^4.0.1"
+    "redux": "^5.0.1"
   }
 }

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,5 +1,5 @@
 import {Button} from '@gravity-ui/uikit';
-import {useDispatch} from 'react-redux';
+import {useTypedDispatch} from '../../utils/hooks';
 import {enableFullscreen} from '../../store/reducers/fullscreen';
 import {Icon} from '../Icon';
 
@@ -8,7 +8,7 @@ interface EnableFullscreenButtonProps {
 }
 
 function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
     };

src/components/Fullscreen/Fullscreen.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import {Button} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 
-import {useDispatch} from 'react-redux';
+import {useTypedDispatch} from '../../utils/hooks';
 import {disableFullscreen} from '../../store/reducers/fullscreen';
 import {Icon} from '../Icon';
 
@@ -49,22 +49,24 @@ class FullscreenWrapper extends React.Component<FullscreenWrapperProps> {
 }
 
 function Fullscreen(props: FullscreenProps) {
-    const dispatch = useDispatch();
-    const escFunction = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-            onDisableFullScreen();
-        }
-    };
+    const dispatch = useTypedDispatch();
+
+    const onDisableFullScreen = React.useCallback(() => {
+        dispatch(disableFullscreen());
+    }, [dispatch]);
+
     useEffect(() => {
+        const escFunction = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                onDisableFullScreen();
+            }
+        };
+
         document.addEventListener('keydown', escFunction, false);
         return () => {
             document.removeEventListener('keydown', escFunction, false);
         };
-    }, []);
-
-    const onDisableFullScreen = () => {
-        dispatch(disableFullscreen());
-    };
+    }, [onDisableFullScreen]);
 
     return (
         <FullscreenWrapper>

src/components/QueryResultTable/Cell/Cell.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
-import {useDispatch} from 'react-redux';
 
+import {useTypedDispatch} from '../../../utils/hooks';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 
 import {b} from '../QueryResultTable';
@@ -13,7 +13,7 @@ interface CellProps {
 export const Cell = React.memo(function Cell(props: CellProps) {
     const {className, value} = props;
 
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
 
     useEffect(
         () => () => {

src/components/TabletsOverall/TabletsOverall.tsx

@@ -1,9 +1,9 @@
-import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Progress} from '@gravity-ui/uikit';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {useTypedDispatch} from '../../utils/hooks';
 import {COLORS_PRIORITY} from '../../utils/constants';
 
 import './TabletsOverall.scss';
@@ -29,17 +29,17 @@ interface TabletsOverallProps {
 }
 
 function TabletsOverall({tablets}: TabletsOverallProps) {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
 
     const tabletsCount = tablets.length;
 
-    const substractPercentsFromMaxPercents = (
+    const subtractPercentsFromMaxPercents = (
         statesForOverallProgress: Record<Color, number>,
-        substractValue: number,
+        subtractValue: number,
     ) => {
         Object.keys(statesForOverallProgress).some((key) => {
             if (statesForOverallProgress[key as Color] > 10) {
-                statesForOverallProgress[key as Color] -= minOverallPercentValue - substractValue;
+                statesForOverallProgress[key as Color] -= minOverallPercentValue - subtractValue;
                 return true;
             }
             return false;
@@ -71,7 +71,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) {
     // replace percents which are smaller then 3 to 3.
     Object.keys(statesForOverallProgress).forEach((key) => {
         if (statesForOverallProgress[key] < minOverallPercentValue) {
-            substractPercentsFromMaxPercents(
+            subtractPercentsFromMaxPercents(
                 statesForOverallProgress,
                 statesForOverallProgress[key],
             );

src/components/VirtualTable/TableHead.tsx

@@ -144,7 +144,7 @@ export const TableHead = <T,>({
         return new ResizeObserver((entries) => {
             const columnsWidth: TableColumnsWidthSetup = {};
             entries.forEach((entry) => {
-                // @ts-ignore ignore custrom property usage
+                // @ts-expect-error ignore custrom property usage
                 const id = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]?.value;
                 columnsWidth[id] = entry.contentRect.width;
             });

src/containers/App/App.tsx

@@ -12,9 +12,10 @@ import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import {settings} from '../UserSettings/settings';
 import {Providers} from './Providers';
 
-import type {Store} from 'redux';
+import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
+import type {RootState} from '../../store';
 
 import './App.scss';
 
@@ -46,7 +47,7 @@ function App({store, history, singleClusterMode, children, userSettings = settin
     );
 }
 
-function mapStateToProps(state: any) {
+function mapStateToProps(state: RootState) {
     return {
         singleClusterMode: state.singleClusterMode,
     };

src/containers/App/Content.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Switch, Route, Redirect, RedirectProps} from 'react-router-dom';
 import cn from 'bem-cn-lite';
-import {connect, useDispatch} from 'react-redux';
+import {connect} from 'react-redux';
 
 import routes from '../../routes';
 
@@ -17,7 +17,7 @@ import Authentication from '../Authentication/Authentication';
 import {getUser} from '../../store/reducers/authentication/authentication';
 import {getClusterPath} from '../Cluster/utils';
 import {useSlots} from '../../components/slots';
-import {useTypedSelector} from '../../utils/hooks';
+import {useTypedSelector, useTypedDispatch} from '../../utils/hooks';
 import {
     ClusterSlot,
     ClustersSlot,
@@ -32,6 +32,7 @@ import {
 import type {SlotComponent} from '../../components/slots/types';
 import type {SlotMap} from '../../components/slots/SlotMap';
 import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
+import type {RootState} from '../../store';
 
 import i18n from './i18n';
 import './App.scss';
@@ -142,7 +143,7 @@ export function Content(props: ContentProps) {
 }
 
 function GetUser() {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const {isAuthenticated, isInternalUser} = useTypedSelector((state) => ({
         isAuthenticated: state.authentication.isAuthenticated,
         isInternalUser: Boolean(state.authentication.user),
@@ -180,7 +181,7 @@ function ContentWrapper(props: ContentWrapperProps) {
     );
 }
 
-function mapStateToProps(state: any) {
+function mapStateToProps(state: RootState) {
     return {
         isAuthenticated: state.authentication.isAuthenticated,
         singleClusterMode: state.singleClusterMode,

src/containers/App/Providers.tsx

@@ -11,7 +11,7 @@ import {componentsRegistry as defaultComponentsRegistry} from '../../components/
 import {useSetting} from '../../utils/hooks';
 import {THEME_KEY} from '../../utils/constants';
 
-import type {Store} from 'redux';
+import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 

src/containers/AppWithClusters/AppWithClusters.tsx

@@ -1,7 +1,7 @@
 import {App, AppSlots} from '../App';
 
 import type {History} from 'history';
-import type {Store} from 'redux';
+import type {Store} from '@reduxjs/toolkit';
 
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../utils/monitoring';