[CHORE] Provide types for react-redux hooks

services/common/src/redux/actionCreators/incidentActionCreator.ts

@@ -8,12 +8,16 @@ import * as incidentActions from "../actions/incidentActions";
 import * as API from "@mds/common/constants/API";
 import { createRequestHeader } from "../utils/RequestHeaders";
 import CustomAxios from "../customAxios";
+import { IMineIncident } from "@mds/common/interfaces";
+import { AppThunk } from "@mds/common/interfaces/appThunk.type";
+import { AxiosResponse } from "axios";
+
 
 export const createMineIncident = (
   mine_guid,
   payload,
   message = "Successfully created incident."
-) => (dispatch) => {
+): AppThunk<Promise<AxiosResponse<IMineIncident>>> => (dispatch): Promise<AxiosResponse<IMineIncident>> => {
   dispatch(request(NetworkReducerTypes.CREATE_MINE_INCIDENT));
   dispatch(showLoading("modal"));
   return CustomAxios()

services/common/src/redux/rootState.ts

@@ -2,6 +2,9 @@ import { sharedReducer } from "@mds/common/redux/reducers/rootReducerShared";
 import { configureStore } from "@reduxjs/toolkit";
 import { loadingBarReducer } from "react-redux-loading-bar";
 
+import type { TypedUseSelectorHook } from 'react-redux'
+import { useDispatch, useSelector, useStore } from 'react-redux'
+
 export const getStore = (preloadedState = {}) =>
   configureStore({
     reducer: {
@@ -14,6 +17,16 @@ export const getStore = (preloadedState = {}) =>
 
 export const store = getStore();
 
+// Provide typed versions for global redux functions
 type RootState = ReturnType<typeof store.getState>;
 
+export type AppDispatch = typeof store.dispatch;
+export type AppStore = typeof store;
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const useAppStore: () => AppStore = useStore;
+
+
 export { RootState };

services/core-web/src/components/mine/Incidents/MineIncident.tsx

@@ -11,12 +11,12 @@ import {
   fetchMineIncident,
   updateMineIncident,
 } from "@mds/common/redux/actionCreators/incidentActionCreator";
-import { clearMineIncident } from "@mds/common/redux/actions/incidentActions";
 import * as Strings from "@mds/common/constants/strings";
 import * as FORM from "@/constants/forms";
 import IncidentForm from "@/components/Forms/incidents/IncidentForm";
 import ScrollSideMenu from "@mds/common/components/common/ScrollSideMenu";
 import * as routes from "@/constants/routes";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 interface IParams {
   mineGuid?: string;
@@ -25,7 +25,7 @@ interface IParams {
 }
 
 export const MineIncident = (props) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { history } = props;
   const params = useParams<IParams>();