ui: extract useTypedSlector into a hooks specific file

ui/src/containers/VolumePage.js

@@ -33,7 +33,7 @@ import { Breadcrumb } from '@scality/core-ui';
 import { PageContainer } from '../components/CommonLayoutStyle';
 import { intl } from '../translations/IntlGlobalProvider';
 import { useQuery } from '../services/utils';
-import { useTypedSelector } from '../ducks/reducer';
+import { useTypedSelector } from '../hooks';
 
 // <VolumePage> component fetchs all the data used by volume page from redux store.
 // the data for <VolumeMetricGraphCard>: get the default metrics time span `last 24 hours`, and the component itself can change the time span base on the dropdown selection.

ui/src/ducks/reducer.js

@@ -1,7 +1,6 @@
 //@flow
 import { combineReducers } from 'redux';
 import { reducer as oidcReducer, UserState } from 'redux-oidc';
-import { useSelector } from 'react-redux';
 
 import config from './config';
 import type {ConfigState} from './config'
@@ -55,9 +54,4 @@ export type RootState = {
   }
 }
 
-export const useTypedSelector: <TSelected>(
-  selector: (state: RootState) => TSelected,
-  equalityFn?: (left: TSelected, right: TSelected) => boolean
-) => TSelected = useSelector;
-
 export default rootReducer;

ui/src/hooks.js

@@ -0,0 +1,12 @@
+//@flow
+import { useSelector } from 'react-redux';
+import type { RootState } from './ducks/reducer';
+
+/**
+ * It brings automatic strong typing to native useSelector by anotating state with RootState.
+ * It should be used instead of useSelector to benefit from RootState typing
+ */
+export const useTypedSelector: <TSelected>(
+    selector: (state: RootState) => TSelected,
+    equalityFn?: (left: TSelected, right: TSelected) => boolean
+  ) => TSelected = useSelector;