refactor(store): add useTypedSelector hook

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -1,12 +1,11 @@
 import {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
-import {IRootState} from '../../../../store/reducers';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useAutofetcher} from '../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
 import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
 
@@ -29,7 +28,7 @@ export const Consumers = ({path}: ConsumersProps) => {
 
     useAutofetcher(fetchData, [path]);
 
-    const consumers = useSelector((state: IRootState) => selectConsumers(state, path));
+    const consumers = useTypedSelector((state) => selectConsumers(state, path));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
 

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx

@@ -1,17 +1,16 @@
 import {useCallback} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
 
 import {SelfCheckResult} from '../../../../types/api/healthcheck';
-import {IRootState} from '../../../../store/reducers';
+import {useTypedSelector, useAutofetcher} from '../../../../utils/hooks';
 import {
     getHealthcheckInfo,
     selectIssuesTreeById,
     selectIssuesTreesRoots,
 } from '../../../../store/reducers/healthcheckInfo';
-import {useAutofetcher} from '../../../../utils/hooks';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
@@ -34,17 +33,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
 
     const dispatch = useDispatch();
 
-    const {data, loading, wasLoaded, error} = useSelector(
-        (state: IRootState) => state.healthcheckInfo,
-    );
+    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
     const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
 
-    const issuesTreesRoots = useSelector(selectIssuesTreesRoots);
-    const expandedIssueTree = useSelector((state: IRootState) =>
+    const issuesTreesRoots = useTypedSelector(selectIssuesTreesRoots);
+    const expandedIssueTree = useTypedSelector((state) =>
         selectIssuesTreeById(state, expandedIssueId),
     );
 
-    const {autorefresh} = useSelector((state: any) => state.schema);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
         dispatch(getHealthcheckInfo(tenant));

src/store/index.js

@@ -32,4 +32,6 @@ function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
 export const webVersion = window.web_version;
 export const customBackend = window.custom_backend;
 
+export * from "./reducers"
+
 export default configureStore;

src/utils/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useAutofetcher';
+export * from './useTypedSelector';

src/utils/hooks/useTypedSelector.ts

@@ -0,0 +1,5 @@
+import {TypedUseSelectorHook, useSelector} from 'react-redux';
+
+import {IRootState} from '../../store';
+
+export const useTypedSelector: TypedUseSelectorHook<IRootState> = useSelector;