diff --git a/plugin-hrm-form/src/___tests__/components/CSAMReport/CSAMReport.test.tsx b/plugin-hrm-form/src/___tests__/components/CSAMReport/CSAMReport.test.tsx
index 680a5f5ba9..9ed786aad8 100644
--- a/plugin-hrm-form/src/___tests__/components/CSAMReport/CSAMReport.test.tsx
+++ b/plugin-hrm-form/src/___tests__/components/CSAMReport/CSAMReport.test.tsx
@@ -19,44 +19,41 @@ import * as React from 'react';
 import { toHaveNoViolations } from 'jest-axe';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { StorelessThemeProvider } from '@twilio/flex-ui';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
 import '@testing-library/jest-dom/extend-expect';
 
 import { CSAMReportTypes, isCounsellorTaskEntry, CSAMReportStateEntry } from '../../../states/csam-report/types';
 import '../../mockGetConfig';
-import { CSAMReportScreen, Props } from '../../../components/CSAMReport/CSAMReport';
-import { childInitialValues, initialValues } from '../../../components/CSAMReport/CSAMReportFormDefinition';
+import { CSAMReportScreen } from '../../../components/CSAMReport/CSAMReport';
+import { initialValues } from '../../../components/CSAMReport/CSAMReportFormDefinition';
 import { CSAMPage, CSAMReportApi } from '../../../components/CSAMReport/csamReportApi';
+import { namespace, configurationBase } from '../../../states/storeNamespaces';
+import { RootState } from '../../../states';
+import { RecursivePartial } from '../../RecursivePartial';
 
 console.error = () => undefined;
 expect.extend(toHaveNoViolations);
 
-const taskSid = 'task-sid';
 const workerSid = 'worker-sid';
 
 let mockCSAMReportApi: CSAMReportApi;
 let dispatcherMocks;
 
-const setupProps = (
-  currentPage: CSAMPage,
-  csamReportState: CSAMReportStateEntry,
-): Props & { alertSpy: jest.SpyInstance } => {
+const mockStore = configureMockStore([]);
+
+const setupMockState = (currentPage: CSAMPage, csamReportState: CSAMReportStateEntry): RecursivePartial<RootState> => {
   (mockCSAMReportApi.currentPage as jest.Mock).mockReturnValue(currentPage);
   (mockCSAMReportApi.reportState as jest.Mock).mockReturnValue(csamReportState);
+
   return {
-    alertSpy: jest.spyOn(window, 'alert'),
-    updateChildForm: dispatcherMocks.updateChildReportDispatcher,
-    updateCounsellorForm: dispatcherMocks.updateCounsellorReportDispatcher,
-    updateStatus: dispatcherMocks.updateStatusDispatcher,
-    navigate: dispatcherMocks.navigationActionDispatcher,
-    addCSAMReportEntry: dispatcherMocks.addReportDispatcher,
-    exit: dispatcherMocks.exitActionDispatcher,
-    pickReportType: dispatcherMocks.pickReportTypeDispatcher,
-    csamReportState,
-    currentPage,
-    setEditPageOpen: jest.fn(),
-    setEditPageClosed: jest.fn(),
-    counselorsHash: { workerSid },
-    api: mockCSAMReportApi,
+    [namespace]: {
+      [configurationBase]: {
+        counselors: {
+          hash: { [workerSid]: workerSid },
+        },
+      },
+    },
   };
 };
 
@@ -64,50 +61,26 @@ const renderCSAMReportScreen = (
   subrouteParam = CSAMPage.Form,
   csamReportStateParam: CSAMReportStateEntry = { form: initialValues, reportType: CSAMReportTypes.COUNSELLOR },
 ) => {
-  const {
-    alertSpy,
-    updateChildForm,
-    updateCounsellorForm,
-    updateStatus,
-    addCSAMReportEntry,
-    csamReportState,
-    currentPage,
-    counselorsHash,
-    setEditPageClosed,
-    setEditPageOpen,
-    navigate,
-    exit,
-    api,
-  } = setupProps(subrouteParam, csamReportStateParam);
+  const alertSpy = jest.spyOn(window, 'alert');
+  const mockState = setupMockState(subrouteParam, csamReportStateParam);
+  const store = mockStore(mockState);
 
   render(
     <StorelessThemeProvider themeConf={{}}>
-      <CSAMReportScreen
-        taskSid={taskSid}
-        updateChildForm={updateChildForm}
-        updateCounsellorForm={updateCounsellorForm}
-        updateStatus={updateStatus}
-        addCSAMReportEntry={addCSAMReportEntry}
-        csamReportState={csamReportState}
-        counselorsHash={counselorsHash}
-        navigate={navigate}
-        exit={exit}
-        api={api}
-        setEditPageOpen={setEditPageOpen}
-        setEditPageClosed={setEditPageClosed}
-        currentPage={currentPage}
-      />
+      <Provider store={store}>
+        <CSAMReportScreen api={mockCSAMReportApi} />
+      </Provider>
     </StorelessThemeProvider>,
   );
 
   return {
     alertSpy,
-    updateStatus,
-    addCSAMReportEntry,
-    csamReportState,
-    counselorsHash,
-    navigate,
-    api,
+    updateStatus: dispatcherMocks.updateStatusDispatcher,
+    addCSAMReportEntry: dispatcherMocks.addReportDispatcher,
+    csamReportState: csamReportStateParam,
+    counselorsHash: { workerSid },
+    navigate: dispatcherMocks.navigationActionDispatcher,
+    api: mockCSAMReportApi,
   };
 };
 
@@ -119,6 +92,7 @@ beforeEach(() => {
     updateChildReportDispatcher: jest.fn(),
     updateCounsellorReportDispatcher: jest.fn(),
     updateStatusDispatcher: jest.fn(),
+    pickReportTypeDispatcher: jest.fn(),
   };
 
   mockCSAMReportApi = {
@@ -127,7 +101,7 @@ beforeEach(() => {
     navigationActionDispatcher: () => dispatcherMocks.navigationActionDispatcher,
     updateChildReportDispatcher: () => dispatcherMocks.updateChildReportDispatcher,
     updateCounsellorReportDispatcher: () => dispatcherMocks.updateCounsellorReportDispatcher,
-    updateStatusDispatcher: () => dispatcherMocks.updateCounsellorReportDispatcher,
+    updateStatusDispatcher: () => dispatcherMocks.updateStatusDispatcher,
     pickReportTypeDispatcher: () => dispatcherMocks.pickReportTypeDispatcher,
     saveReport: jest.fn(),
     currentPage: jest.fn(),
diff --git a/plugin-hrm-form/src/___tests__/components/case/caseOverview/EditCaseOverview.test.tsx b/plugin-hrm-form/src/___tests__/components/case/caseOverview/EditCaseOverview.test.tsx
index 21f8f329b0..7571bd7c29 100644
--- a/plugin-hrm-form/src/___tests__/components/case/caseOverview/EditCaseOverview.test.tsx
+++ b/plugin-hrm-form/src/___tests__/components/case/caseOverview/EditCaseOverview.test.tsx
@@ -49,7 +49,9 @@ const state: RecursivePartial<RootState> = {
         list: [],
         hash: { worker1: 'worker1 name' },
       },
-      definitionVersions: {},
+      definitionVersions: {
+        'as-v1': null,
+      },
       currentDefinitionVersion: {
         caseStatus: {
           open: {
@@ -129,10 +131,10 @@ describe('Test EditCaseOverview', () => {
     mockReset();
     ownProps = {
       task: task as StandaloneITask,
-      definitionVersion: mockV1,
       can: () => true,
     };
     store.dispatch = jest.fn();
+    state[namespace].configuration.definitionVersions['as-v1'] = mockV1;
   });
   test('Test close functionality', async () => {
     render(
diff --git a/plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx b/plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx
index f72c5e870a..dec795ca5e 100644
--- a/plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx
+++ b/plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx
@@ -14,10 +14,10 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
+import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { CircularProgress } from '@material-ui/core';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import CSAMReportStatusScreen from './CSAMReportStatusScreen';
 import CSAMReportCounsellorForm from './CSAMReportCounsellorForm';
@@ -30,45 +30,24 @@ import CSAMReportChildForm from './CSAMReportChildForm';
 import { getHrmConfig, getTemplateStrings } from '../../hrmConfig';
 import { configurationBase, namespace } from '../../states/storeNamespaces';
 
-type OwnProps = {
+type Props = {
   api: CSAMReportApi;
 };
 
-const mapStateToProps = (state: RootState, { api }: OwnProps) => ({
-  csamReportState: api.reportState(state),
-  currentPage: api.currentPage(state),
-  counselorsHash: state[namespace][configurationBase].counselors.hash,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { api }: OwnProps) => {
-  return {
-    updateCounsellorForm: api.updateCounsellorReportDispatcher(dispatch),
-    updateChildForm: api.updateChildReportDispatcher(dispatch),
-    updateStatus: api.updateStatusDispatcher(dispatch),
-    navigate: api.navigationActionDispatcher(dispatch),
-    exit: api.exitActionDispatcher(dispatch),
-    addCSAMReportEntry: api.addReportDispatcher(dispatch),
-    pickReportType: api.pickReportTypeDispatcher(dispatch),
-  };
-};
-
-// eslint-disable-next-line no-use-before-define
-export type Props = OwnProps & ConnectedProps<typeof connector>;
-
 // exported for test purposes
-export const CSAMReportScreen: React.FC<Props> = ({
-  updateChildForm,
-  updateCounsellorForm,
-  updateStatus,
-  navigate,
-  exit,
-  addCSAMReportEntry,
-  csamReportState,
-  currentPage,
-  counselorsHash,
-  api,
-  pickReportType,
-}) => {
+export const CSAMReportScreen: React.FC<Props> = ({ api }) => {
+  const dispatch = useDispatch();
+  const csamReportState = useSelector((state: RootState) => api.reportState(state));
+  const currentPage = useSelector((state: RootState) => api.currentPage(state));
+  const counselorsHash = useSelector((state: RootState) => state[namespace][configurationBase].counselors.hash);
+
+  const updateCounsellorForm = api.updateCounsellorReportDispatcher(dispatch);
+  const updateChildForm = api.updateChildReportDispatcher(dispatch);
+  const updateStatus = api.updateStatusDispatcher(dispatch);
+  const navigate = api.navigationActionDispatcher(dispatch);
+  const exit = api.exitActionDispatcher(dispatch);
+  const addCSAMReportEntry = api.addReportDispatcher(dispatch);
+  const pickReportType = api.pickReportTypeDispatcher(dispatch);
   const methods = useForm({ reValidateMode: 'onChange' });
 
   const { workerSid } = getHrmConfig();
@@ -186,7 +165,4 @@ export const CSAMReportScreen: React.FC<Props> = ({
 
 CSAMReportScreen.displayName = 'CSAMReportScreen';
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
-const connected = connector(CSAMReportScreen);
-
-export default connected;
+export default CSAMReportScreen;
diff --git a/plugin-hrm-form/src/components/NavigableContainer/index.tsx b/plugin-hrm-form/src/components/NavigableContainer/index.tsx
index 65b3a92013..019367e07f 100644
--- a/plugin-hrm-form/src/components/NavigableContainer/index.tsx
+++ b/plugin-hrm-form/src/components/NavigableContainer/index.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 import React from 'react';
 import { Close } from '@material-ui/icons';
@@ -24,8 +24,8 @@ import { namespace } from '../../states/storeNamespaces';
 import { RootState } from '../../states';
 import { getCurrentBaseRoute, getCurrentTopmostRouteStackForTask } from '../../states/routing/getRoute';
 import { isRouteModal } from '../../states/routing/types';
-import { changeRoute, newCloseModalAction, newGoBackAction } from '../../states/routing/actions';
-import { Contact, CustomITask, StandaloneITask } from '../../types/types';
+import { newCloseModalAction, newGoBackAction } from '../../states/routing/actions';
+import { CustomITask, StandaloneITask } from '../../types/types';
 import { Box, HiddenText, Row } from '../../styles';
 import { StyledBackButton, HeaderCloseButton } from '../../styles/buttons';
 import { LargeBackIcon, NavigableContainerBox, NavigableContainerContentBox, NavigableContainerTitle } from './styles';
@@ -33,58 +33,44 @@ import useFocus from '../../utils/useFocus';
 
 type FocusTarget = 'back' | 'close';
 
-type OwnProps = {
+type Props = {
   task: CustomITask | StandaloneITask;
   titleCode: string;
   titleValues?: Record<string, string>;
   onGoBack?: () => void;
   onCloseModal?: () => void;
-  focusPriority: FocusTarget[];
+  focusPriority?: FocusTarget[];
   noOverflow?: boolean;
-};
-
-const mapStateToProps = ({ [namespace]: { routing } }: RootState, { task: { taskSid } }: OwnProps) => {
-  const routeStack = getCurrentTopmostRouteStackForTask(routing, taskSid);
-  return {
-    routing: routeStack[routeStack.length - 1],
-    hasHistory: routeStack.length > 1,
-    isModal: isRouteModal(getCurrentBaseRoute(routing, taskSid)),
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const taskId = ownProps.task.taskSid;
-
-  return {
-    goBack: () => dispatch(newGoBackAction(taskId)),
-    closeModal: () => {
-      dispatch(newCloseModalAction(taskId));
-    },
-    viewContactDetails: ({ id }: Contact) => {
-      dispatch(changeRoute({ route: 'contact', subroute: 'view', id: id.toString() }, taskId));
-    },
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector> & StyledProps;
+} & Partial<StyledProps>;
 
 const NavigableContainer: React.FC<Props> = ({
   children,
-  goBack,
-  onGoBack = () => goBack(),
-  closeModal,
-  onCloseModal = () => closeModal(),
+  task,
+  onGoBack,
+  onCloseModal,
   titleCode,
   titleValues = {},
-  hasHistory,
-  isModal,
   focusPriority = ['back', 'close'],
-  routing,
   noOverflow,
   ...boxProps
 }) => {
+  const dispatch = useDispatch();
+  const { taskSid } = task;
+
+  const routeStack = useSelector((state: RootState) =>
+    getCurrentTopmostRouteStackForTask(state[namespace].routing, taskSid),
+  );
+  const routing = routeStack[routeStack.length - 1];
+  const hasHistory = routeStack.length > 1;
+  const isModal = useSelector((state: RootState) =>
+    isRouteModal(getCurrentBaseRoute(state[namespace].routing, taskSid)),
+  );
+
+  const goBack = () => dispatch(newGoBackAction(taskSid));
+  const closeModal = () => dispatch(newCloseModalAction(taskSid));
+
+  const handleGoBack = onGoBack || goBack;
+  const handleCloseModal = onCloseModal || closeModal;
   const validFocusPriority = (focusPriority ?? []).filter(
     target => (target === 'back' && hasHistory) || (target === 'close' && isModal),
   );
@@ -99,7 +85,7 @@ const NavigableContainer: React.FC<Props> = ({
           {hasHistory && (
             <StyledBackButton
               style={{ marginTop: '10px', marginRight: '5px' }}
-              onClick={onGoBack}
+              onClick={handleGoBack}
               data-testid="NavigableContainer-BackButton"
               ref={ref => {
                 if (shouldFocus('back')) {
@@ -119,7 +105,7 @@ const NavigableContainer: React.FC<Props> = ({
         </NavigableContainerTitle>
         {isModal && (
           <HeaderCloseButton
-            onClick={onCloseModal}
+            onClick={handleCloseModal}
             data-testid="NavigableContainer-CloseCross"
             style={{ marginRight: '15px', opacity: '.75' }}
             ref={ref => {
@@ -140,4 +126,4 @@ const NavigableContainer: React.FC<Props> = ({
   );
 };
 
-export default connector(NavigableContainer);
+export default NavigableContainer;
diff --git a/plugin-hrm-form/src/components/case/Case.tsx b/plugin-hrm-form/src/components/case/Case.tsx
index 40d77e7acf..f687782e6c 100644
--- a/plugin-hrm-form/src/components/case/Case.tsx
+++ b/plugin-hrm-form/src/components/case/Case.tsx
@@ -15,9 +15,8 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { CircularProgress } from '@material-ui/core';
-import { AnyAction, bindActionCreators } from 'redux';
 
 import { RootState } from '../../states';
 import { getDefinitionVersion } from '../../services/ServerlessService';
@@ -44,8 +43,6 @@ import { CenteredContainer } from './styles';
 import EditCaseOverview from './caseOverview/EditCaseOverview';
 import * as ContactActions from '../../states/contacts/existingContacts';
 import { getHrmConfig, getTemplateStrings } from '../../hrmConfig';
-import asyncDispatch from '../../states/asyncDispatch';
-import { removeFromCaseAsyncAction } from '../../states/contacts/saveContact';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import { selectCurrentDefinitionVersion, selectDefinitionVersions } from '../../states/configuration/selectDefinitions';
 import FullTimelineView from './timeline/FullTimelineView';
@@ -58,33 +55,41 @@ export const isStandaloneITask = (task): task is StandaloneITask => {
   return task && task.taskSid === 'standalone-task-sid';
 };
 
-type OwnProps = {
+type Props = {
   task: CustomITask | StandaloneITask;
   handleClose?: () => void;
   onNewCaseSaved?: (savedCase: CaseType) => Promise<void>;
 };
 
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const Case: React.FC<Props> = ({
-  task,
-  connectedCaseId,
-  counselorsHash,
-  removeConnectedCase,
-  redirectToNewCase,
-  closeModal,
-  handleClose = closeModal,
-  routing,
-  // loadCase,
-  loadContacts,
-  releaseAllContacts,
-  openPrintModal,
-  onNewCaseSaved = () => Promise.resolve(),
-  contextContact,
-  ...props
-}) => {
+const Case: React.FC<Props> = ({ task, handleClose, onNewCaseSaved = () => Promise.resolve() }) => {
+  const dispatch = useDispatch();
   const [loading, setLoading] = useState(false);
+
+  const currentRoute = useSelector((state: RootState) => selectCurrentTopmostRouteForTask(state, task.taskSid));
+  const connectedCaseId = isCaseRoute(currentRoute) ? currentRoute.caseId : undefined;
+  const contactId = useSelector((state: RootState) => selectContextContactId(state, task.taskSid, 'case', 'home'));
+  const counselorsHash = useSelector(selectCounselorsHash);
+  const definitionVersions = useSelector(selectDefinitionVersions);
+  const currentDefinitionVersion = useSelector(selectCurrentDefinitionVersion);
+  const routing = currentRoute as CaseRoute;
+  const contextContact = useSelector(
+    (state: RootState) => selectContactStateByContactId(state, contactId)?.savedContact,
+  );
+
+  const closeModal = () => dispatch(RoutingActions.newCloseModalAction(task.taskSid));
+  const redirectToNewCase = (caseId: string) =>
+    dispatch(
+      RoutingActions.changeRoute(
+        { route: 'case', subroute: 'home', caseId, isCreating: true },
+        task.taskSid,
+        ChangeRouteMode.Replace,
+      ),
+    );
+  const openPrintModal = (caseId: CaseType['id']) => {
+    dispatch(RoutingActions.newOpenModalAction({ route: 'case', subroute: 'case-print-view', caseId }, task.taskSid));
+  };
+  const releaseAllContacts = (referenceId: string) => dispatch(ContactActions.releaseAllContacts(referenceId));
+
   const { connectedCase, loading: loadingCase } = useCase({
     caseId: connectedCaseId,
     referenceId: `case-details-${task.taskSid}`,
@@ -98,6 +103,8 @@ const Case: React.FC<Props> = ({
   const { workerSid } = getHrmConfig();
   const strings = getTemplateStrings();
 
+  const actualHandleClose = handleClose || closeModal;
+
   useEffect(() => {
     if (routing.isCreating && !routing.caseId && contextContact?.caseId) {
       redirectToNewCase(contextContact.caseId);
@@ -105,7 +112,6 @@ const Case: React.FC<Props> = ({
   });
 
   const version = connectedCase?.definitionVersion ?? connectedCase?.info.definitionVersion;
-  const { updateDefinitionVersion, definitionVersions } = props;
 
   /**
    * Check if the definitionVersion for this case exists in redux, and look for it if not.
@@ -113,15 +119,20 @@ const Case: React.FC<Props> = ({
   useEffect(() => {
     const fetchDefinitionVersions = async () => {
       const definitionVersion = await getDefinitionVersion(version);
-      updateDefinitionVersion(connectedCase, version, definitionVersion);
+      dispatch(
+        ConfigActions.updateDefinitionVersion(
+          connectedCase.definitionVersion ?? connectedCase.info.definitionVersion,
+          definitionVersion,
+        ),
+      );
     };
 
     if (version && !definitionVersions[version]) {
       fetchDefinitionVersions();
     }
-  }, [connectedCase, definitionVersions, task.taskSid, updateDefinitionVersion, version]);
+  }, [connectedCase, definitionVersions, dispatch, task.taskSid, version]);
 
-  const definitionVersion = props.definitionVersions[version];
+  const definitionVersion = definitionVersions[version];
 
   if (loading || loadingCase) {
     return (
@@ -159,7 +170,7 @@ const Case: React.FC<Props> = ({
 
   const handleCloseCase = async () => {
     releaseAllContacts(`case-${connectedCase.id}`);
-    handleClose();
+    actualHandleClose();
   };
 
   if (isAddCaseSectionRoute(routing) || isViewCaseSectionRoute(routing) || isEditCaseSectionRoute(routing)) {
@@ -226,52 +237,4 @@ const Case: React.FC<Props> = ({
 
 Case.displayName = 'Case';
 
-const mapStateToProps = (state: RootState, { task }: OwnProps) => {
-  const currentRoute = selectCurrentTopmostRouteForTask(state, task.taskSid);
-  const connectedCaseId = isCaseRoute(currentRoute) ? currentRoute.caseId : undefined;
-  const contactId = selectContextContactId(state, task.taskSid, 'case', 'home');
-
-  return {
-    connectedCaseId,
-    counselorsHash: selectCounselorsHash(state),
-    definitionVersions: selectDefinitionVersions(state),
-    currentDefinitionVersion: selectCurrentDefinitionVersion(state),
-    routing: currentRoute as CaseRoute,
-    contextContact: selectContactStateByContactId(state, contactId)?.savedContact,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { task }: OwnProps) => {
-  const caseAsyncDispatch = asyncDispatch<AnyAction>(dispatch);
-  const updateCaseDefinition = (connectedCase: CaseType, taskSid: string, definition) => {
-    dispatch(
-      ConfigActions.updateDefinitionVersion(
-        connectedCase.definitionVersion ?? connectedCase.info.definitionVersion,
-        definition,
-      ),
-    );
-  };
-  return {
-    redirectToNewCase: (caseId: string) =>
-      dispatch(
-        RoutingActions.changeRoute(
-          { route: 'case', subroute: 'home', caseId, isCreating: true },
-          task.taskSid,
-          ChangeRouteMode.Replace,
-        ),
-      ),
-    closeModal: () => dispatch(RoutingActions.newCloseModalAction(task.taskSid)),
-    openPrintModal: (caseId: CaseType['id']) => {
-      dispatch(RoutingActions.newOpenModalAction({ route: 'case', subroute: 'case-print-view', caseId }, task.taskSid));
-    },
-    removeConnectedCase: (contactId: string) => caseAsyncDispatch(removeFromCaseAsyncAction(contactId)),
-    updateDefinitionVersion: updateCaseDefinition,
-    releaseAllContacts: bindActionCreators(ContactActions.releaseAllContacts, dispatch),
-    loadContacts: bindActionCreators(ContactActions.loadContacts, dispatch),
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-const connected = connector(Case);
-
-export default connected;
+export default Case;
diff --git a/plugin-hrm-form/src/components/case/caseOverview/CaseTextAreaEntry.tsx b/plugin-hrm-form/src/components/case/caseOverview/CaseTextAreaEntry.tsx
index 8423057e4d..8fc5f96103 100644
--- a/plugin-hrm-form/src/components/case/caseOverview/CaseTextAreaEntry.tsx
+++ b/plugin-hrm-form/src/components/case/caseOverview/CaseTextAreaEntry.tsx
@@ -17,7 +17,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { Template } from '@twilio/flex-ui';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { CaseOverviewTypeEntry } from 'hrm-form-definitions';
 
 import { CaseDetailsBorder, CaseSectionFont, CaseStyledTextArea } from '../styles';
@@ -26,17 +26,15 @@ import { getTemplateStrings } from '../../../hrmConfig';
 import selectCurrentRouteCaseState from '../../../states/case/selectCurrentRouteCase';
 import { RootState } from '../../../states';
 
-type OwnProps = {
+type Props = {
   task: CustomITask | StandaloneITask;
   textareaFields?: (CaseOverviewTypeEntry & {
     placeholder?: string;
   })[];
 };
 
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ReturnType<typeof mapStateToProps>;
-
-const CaseTextAreaEntry: React.FC<Props> = ({ connectedCaseState, textareaFields }) => {
+const CaseTextAreaEntry: React.FC<Props> = ({ task, textareaFields }) => {
+  const connectedCaseState = useSelector((state: RootState) => selectCurrentRouteCaseState(state, task.taskSid));
   const strings = getTemplateStrings();
   const { connectedCase } = connectedCaseState;
 
@@ -73,8 +71,4 @@ const CaseTextAreaEntry: React.FC<Props> = ({ connectedCaseState, textareaFields
 
 CaseTextAreaEntry.displayName = 'CaseTextAreaEntry';
 
-const mapStateToProps = (state: RootState, { task }: OwnProps) => {
-  return { connectedCaseState: selectCurrentRouteCaseState(state, task.taskSid) };
-};
-
-export default connect(mapStateToProps)(CaseTextAreaEntry);
+export default CaseTextAreaEntry;
diff --git a/plugin-hrm-form/src/components/case/caseOverview/EditCaseOverview.tsx b/plugin-hrm-form/src/components/case/caseOverview/EditCaseOverview.tsx
index eee758bb7f..288a4bf9cf 100644
--- a/plugin-hrm-form/src/components/case/caseOverview/EditCaseOverview.tsx
+++ b/plugin-hrm-form/src/components/case/caseOverview/EditCaseOverview.tsx
@@ -18,11 +18,11 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
 import { Template } from '@twilio/flex-ui';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { FieldValues, FormProvider, SubmitErrorHandler, useForm } from 'react-hook-form';
 import { FormDefinition, FormInputType } from 'hrm-form-definitions';
 import { isEqual } from 'lodash';
-import { AnyAction, bindActionCreators } from 'redux';
+import { AnyAction } from 'redux';
 
 import {
   BottomButtonBar,
@@ -34,7 +34,6 @@ import {
   TwoColumnLayout,
 } from '../../../styles';
 import { RootState } from '../../../states';
-import * as RoutingActions from '../../../states/routing/actions';
 import { newCloseModalAction, newGoBackAction } from '../../../states/routing/actions';
 import type { Case, CaseOverview, CustomITask, StandaloneITask } from '../../../types/types';
 import { recordingErrorHandler } from '../../../fullStory';
@@ -62,51 +61,24 @@ export type EditCaseOverviewProps = {
   can: (action: PermissionActionType) => boolean;
 };
 
-const mapStateToProps = (state: RootState, { task }: EditCaseOverviewProps) => {
-  const connectedCaseState = selectCurrentRouteCaseState(state, task.taskSid);
-  const historyDetails = selectCaseHistoryDetails(state, connectedCaseState?.connectedCase);
-  const workingCopy = connectedCaseState?.caseWorkingCopy.caseSummary;
-  const isUpdating = (connectedCaseState?.outstandingUpdateCount ?? 0) > 0;
-  const definitionVersion = selectDefinitionVersionForCase(state, connectedCaseState?.connectedCase);
-  return { connectedCaseState, workingCopy, definitionVersion, historyDetails, isUpdating };
-};
-
-const mapDispatchToProps = (dispatch, { task }: EditCaseOverviewProps) => {
-  const updateCaseAsyncDispatch = asyncDispatch<AnyAction>(dispatch);
-  return {
-    changeRoute: bindActionCreators(RoutingActions.changeRoute, dispatch),
-    initialiseWorkingCopy: bindActionCreators(initialiseCaseSummaryWorkingCopy, dispatch),
-    updateWorkingCopy: bindActionCreators(updateCaseSummaryWorkingCopy, dispatch),
-    closeActions: (caseId: string, closeModal: boolean) => {
-      dispatch(removeCaseSummaryWorkingCopy(caseId));
-      dispatch(closeModal ? newCloseModalAction(task.taskSid) : newGoBackAction(task.taskSid));
-    },
-    updateCaseAsyncAction: (caseId: Case['id'], overview: CaseOverview, status: Case['status']) =>
-      updateCaseAsyncDispatch(updateCaseOverviewAsyncAction(caseId, overview, status)),
-  };
-};
-
-type Props = EditCaseOverviewProps & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
-
 const enum DialogState {
   Closed,
   OpenForBack,
   OpenForClose,
 }
 
-const EditCaseOverview: React.FC<Props> = ({
-  task,
-  historyDetails,
-  connectedCaseState,
-  workingCopy,
-  initialiseWorkingCopy,
-  updateWorkingCopy,
-  closeActions,
-  can,
-  updateCaseAsyncAction,
-  isUpdating,
-  definitionVersion,
-}) => {
+const EditCaseOverview: React.FC<EditCaseOverviewProps> = ({ task, can }) => {
+  const dispatch = useDispatch();
+
+  const connectedCaseState = useSelector((state: RootState) => selectCurrentRouteCaseState(state, task.taskSid));
+  const historyDetails = useSelector((state: RootState) =>
+    selectCaseHistoryDetails(state, connectedCaseState?.connectedCase),
+  );
+  const workingCopy = connectedCaseState?.caseWorkingCopy.caseSummary;
+  const isUpdating = (connectedCaseState?.outstandingUpdateCount ?? 0) > 0;
+  const definitionVersion = useSelector((state: RootState) =>
+    selectDefinitionVersionForCase(state, connectedCaseState?.connectedCase),
+  );
   const { connectedCase, availableStatusTransitions } = connectedCaseState ?? {};
 
   const caseOverviewFields = definitionVersion?.caseOverview;
@@ -180,15 +152,16 @@ const EditCaseOverview: React.FC<Props> = ({
 
   useEffect(() => {
     if (!workingCopy) {
-      initialiseWorkingCopy(connectedCase.id, initialValues);
+      dispatch(initialiseCaseSummaryWorkingCopy(connectedCase.id, initialValues));
     }
-  }, [connectedCase.id, initialValues, initialiseWorkingCopy, workingCopy]);
+  }, [connectedCase.id, initialValues, dispatch, workingCopy]);
 
   const form = useCreateFormFromDefinition({
     definition: formDefinition,
     initialValues,
     parentsPath: '',
-    updateCallback: () => updateWorkingCopy(connectedCase.id, getValues() as CaseSummaryWorkingCopy),
+    updateCallback: () =>
+      dispatch(updateCaseSummaryWorkingCopy(connectedCase.id, getValues() as CaseSummaryWorkingCopy)),
     isItemEnabled: item => item.name === 'status' || can(PermissionActions.EDIT_CASE_OVERVIEW),
     shouldFocusFirstElement: false,
   });
@@ -215,12 +188,15 @@ const EditCaseOverview: React.FC<Props> = ({
     const { status: oldStatus, id } = connectedCaseState.connectedCase;
     const { status, ...updatedInfoValues } = workingCopy;
 
-    await updateCaseAsyncAction(id, updatedInfoValues, status === oldStatus ? undefined : status);
+    await asyncDispatch<AnyAction>(dispatch)(
+      updateCaseOverviewAsyncAction(id, updatedInfoValues, status === oldStatus ? undefined : status),
+    );
   };
 
   const saveAndLeave = async () => {
     await save();
-    closeActions(connectedCase.id, false);
+    dispatch(removeCaseSummaryWorkingCopy(connectedCase.id));
+    dispatch(newGoBackAction(task.taskSid));
   };
 
   const strings = getTemplateStrings();
@@ -231,7 +207,8 @@ const EditCaseOverview: React.FC<Props> = ({
 
   const checkForEdits = (closeModal: boolean) => {
     if (isEqual(workingCopy, savedForm)) {
-      closeActions(connectedCase.id, closeModal);
+      dispatch(removeCaseSummaryWorkingCopy(connectedCase.id));
+      dispatch(closeModal ? newCloseModalAction(task.taskSid) : newGoBackAction(task.taskSid));
     } else setDialogState(closeModal ? DialogState.OpenForClose : DialogState.OpenForBack);
   };
 
@@ -240,8 +217,8 @@ const EditCaseOverview: React.FC<Props> = ({
       <NavigableContainer
         task={task}
         titleCode="Case-EditCaseOverview"
-        onGoBack={checkForEdits}
-        onCloseModal={checkForEdits}
+        onGoBack={() => checkForEdits(false)}
+        onCloseModal={() => checkForEdits(true)}
         data-testid="Case-EditCaseOverview"
       >
         <CaseSummaryEditHistory {...historyDetails} />
@@ -268,7 +245,14 @@ const EditCaseOverview: React.FC<Props> = ({
           data-testid="CloseCaseDialog"
           openDialog={dialogState === DialogState.OpenForClose || dialogState === DialogState.OpenForBack}
           setDialog={() => setDialogState(DialogState.Closed)}
-          handleDontSaveClose={() => closeActions(connectedCase.id, dialogState === DialogState.OpenForClose)}
+          handleDontSaveClose={() => {
+            dispatch(removeCaseSummaryWorkingCopy(connectedCase.id));
+            dispatch(
+              dialogState === DialogState.OpenForClose
+                ? newCloseModalAction(task.taskSid)
+                : newGoBackAction(task.taskSid),
+            );
+          }}
           handleSaveUpdate={methods.handleSubmit(saveAndLeave, onError)}
         />
       </NavigableContainer>
@@ -278,4 +262,4 @@ const EditCaseOverview: React.FC<Props> = ({
 
 EditCaseOverview.displayName = 'EditCaseOverview';
 
-export default connect(mapStateToProps, mapDispatchToProps)(EditCaseOverview);
+export default EditCaseOverview;
diff --git a/plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx b/plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx
index a7cbac9ca0..91b436a4f7 100644
--- a/plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx
+++ b/plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx
@@ -210,7 +210,11 @@ const CasePrintView: React.FC<OwnProps> = ({ task }) => {
     );
 
   return (
-    <NavigableContainer task={task} onGoBack={() => dispatch(RoutingActions.newGoBackAction(task.taskSid))}>
+    <NavigableContainer
+      task={task}
+      titleCode="Case-PrintView"
+      onGoBack={() => dispatch(RoutingActions.newGoBackAction(task.taskSid))}
+    >
       {loading || !sectionTypeNames.every(sectionName => sectionTimelines[sectionName]) || !contactTimeline ? (
         <CasePrintViewSpinner>
           <CircularProgress size={50} />
diff --git a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
index aecdbd7c27..c598e58bfe 100644
--- a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
@@ -14,8 +14,8 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 
 import NavigableContainer from '../../NavigableContainer';
@@ -37,69 +37,52 @@ type MyProps = {
 const TIMELINE_PAGE_SIZE = 25;
 const MAIN_TIMELINE_ID = 'prime-timeline';
 
-const mapStateToProps = (state: RootState, { task }: MyProps) => {
-  const { caseId, page = 0 } = selectCurrentTopmostRouteForTask(state, task.taskSid) as CaseTimelineRoute;
-  return {
-    page,
-    activityCount: selectTimelineCount(state, caseId, MAIN_TIMELINE_ID),
-    caseId,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: MyProps) => {
-  return {
-    changePage: (caseId: string) => (page: number) => {
-      dispatch(
-        changeRoute({ route: 'case', subroute: 'timeline', caseId, page }, task.taskSid, ChangeRouteMode.Replace),
-      );
-      dispatch(
-        newGetTimelineAsyncAction(
-          caseId,
-          'prime-timeline',
-          ['note', 'referral'],
-          true,
-          {
-            offset: page * TIMELINE_PAGE_SIZE,
-            limit: TIMELINE_PAGE_SIZE,
-          },
-          `case-${caseId}`,
-        ),
-      );
-    },
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
+const FullTimelineView: React.FC<MyProps> = ({ task }: MyProps) => {
+  const dispatch = useDispatch();
 
-type Props = MyProps & ConnectedProps<typeof connector>;
+  const { caseId, page = 0 } = useSelector((state: RootState) =>
+    selectCurrentTopmostRouteForTask(state, task.taskSid),
+  ) as CaseTimelineRoute;
+  const activityCount = useSelector((state: RootState) => selectTimelineCount(state, caseId, MAIN_TIMELINE_ID));
 
-const FullTimelineView: React.FC<Props> = ({ task, page, activityCount, changePage, caseId }: Props) => {
-  const changePageForThisCase = changePage(caseId);
+  const changePageForThisCase = (page: number) => {
+    dispatch(changeRoute({ route: 'case', subroute: 'timeline', caseId, page }, task.taskSid, ChangeRouteMode.Replace));
+    dispatch(
+      newGetTimelineAsyncAction(
+        caseId,
+        'prime-timeline',
+        ['note', 'referral'],
+        true,
+        {
+          offset: page * TIMELINE_PAGE_SIZE,
+          limit: TIMELINE_PAGE_SIZE,
+        },
+        `case-${caseId}`,
+      ),
+    );
+  };
 
   return (
     <CaseLayout>
-      <NavigableContainer
-        task={task}
-        titleCode="Case-Timeline-ModalTitle"
-        titleValues={{ caseId }}
-        style={{ textAlign: 'center' }}
-      >
-        <AddToCaseBanner task={task} />
-        <Timeline
-          taskSid={task.taskSid}
-          timelineId={MAIN_TIMELINE_ID}
-          pageSize={TIMELINE_PAGE_SIZE}
-          page={page}
-          titleCode="Case-Timeline-Title"
-        />
-        <p style={{ marginTop: '10px', fontStyle: 'italic' }}>
-          <Template
-            code="Case-Timeline-PaginationDescription"
-            from={page * TIMELINE_PAGE_SIZE + 1}
-            to={Math.min((page + 1) * TIMELINE_PAGE_SIZE, activityCount)}
-            total={activityCount}
+      <NavigableContainer task={task} titleCode="Case-Timeline-ModalTitle" titleValues={{ caseId }}>
+        <div style={{ textAlign: 'center' }}>
+          <AddToCaseBanner task={task} />
+          <Timeline
+            taskSid={task.taskSid}
+            timelineId={MAIN_TIMELINE_ID}
+            pageSize={TIMELINE_PAGE_SIZE}
+            page={page}
+            titleCode="Case-Timeline-Title"
           />
-        </p>
+          <p style={{ marginTop: '10px', fontStyle: 'italic' }}>
+            <Template
+              code="Case-Timeline-PaginationDescription"
+              from={page * TIMELINE_PAGE_SIZE + 1}
+              to={Math.min((page + 1) * TIMELINE_PAGE_SIZE, activityCount)}
+              total={activityCount}
+            />
+          </p>
+        </div>
         {activityCount > TIMELINE_PAGE_SIZE && (
           <Pagination
             pagesCount={Math.ceil(activityCount / TIMELINE_PAGE_SIZE)}
@@ -114,4 +97,4 @@ const FullTimelineView: React.FC<Props> = ({ task, page, activityCount, changePa
 
 FullTimelineView.displayName = 'FullTimelineView';
 
-export default connector(FullTimelineView);
+export default FullTimelineView;
diff --git a/plugin-hrm-form/src/components/caseList/CaseList.tsx b/plugin-hrm-form/src/components/caseList/CaseList.tsx
index 9348ce2b81..719594adb5 100644
--- a/plugin-hrm-form/src/components/caseList/CaseList.tsx
+++ b/plugin-hrm-form/src/components/caseList/CaseList.tsx
@@ -15,26 +15,24 @@
  */
 
 import React, { useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
-import { DefinitionVersion } from 'hrm-form-definitions';
 
 import Case from '../case';
 import { StandaloneITask, Case as CaseType } from '../../types/types';
 import CaseListTable from './CaseListTable';
 import { ListContainer, CenteredContainer, SomethingWentWrongText, StandaloneContainer } from '../../styles';
 import { CaseLayout } from '../case/styles';
-import * as ConfigActions from '../../states/configuration/actions';
 import { RootState } from '../../states';
 import * as ListContent from '../../states/caseList/listContent';
 import { getHrmConfig } from '../../hrmConfig';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import { newCloseModalAction, newOpenModalAction } from '../../states/routing/actions';
+import { isContactRoute, ProfileRoute, AppRoutes, ContactRoute } from '../../states/routing/types';
 import ContactDetails from '../contact/ContactDetails';
 import { DetailsContext } from '../../states/contacts/contactDetails';
 import selectCasesForList from '../../states/caseList/selectCasesForList';
 import selectCaseListSettings from '../../states/caseList/selectCaseListSettings';
-import { CaseListSettingsState } from '../../states/caseList/settings';
 import asyncDispatch from '../../states/asyncDispatch';
 import ProfileRouter, { isProfileRoute } from '../profile/ProfileRouter';
 
@@ -45,60 +43,37 @@ const standaloneTask: StandaloneITask = {
   attributes: { isContactlessTask: false },
 };
 
-type OwnProps = {};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    updateDefinitionVersion: (version: string, definitions: DefinitionVersion) =>
-      dispatch(ConfigActions.updateDefinitionVersion(version, definitions)),
-    fetchCaseList: (settings: CaseListSettingsState, helpline) =>
-      asyncDispatch(dispatch)(ListContent.fetchCaseListAsyncAction(settings, helpline, CASES_PER_PAGE)),
-    openCaseDetails: (caseId: string) =>
-      dispatch(newOpenModalAction({ route: 'case', subroute: 'home', caseId }, standaloneTask.taskSid)),
-    closeCaseDetails: () => dispatch(newCloseModalAction(standaloneTask.taskSid)),
-  };
-};
-
-const mapStateToProps = (state: RootState) => {
-  return {
-    currentSettings: selectCaseListSettings(state).current,
-    routing: selectCurrentTopmostRouteForTask(state, standaloneTask.taskSid) ?? {
-      route: 'case-list',
-      subroute: 'case-list',
-    },
-    ...selectCasesForList(state),
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const CaseList: React.FC<Props> = ({
-  openCaseDetails,
-  closeCaseDetails,
-  cases: caseList,
-  count: caseCount,
-  currentSettings,
-  fetchError,
-  listLoading,
-  routing,
-  fetchCaseList,
-}) => {
+const CaseList: React.FC = () => {
+  const dispatch = useDispatch();
+  const currentSettings = useSelector((state: RootState) => selectCaseListSettings(state).current);
+  const routing = useSelector(
+    (state: RootState) =>
+      selectCurrentTopmostRouteForTask(state, standaloneTask.taskSid) ?? {
+        route: 'case-list',
+        subroute: 'case-list',
+      },
+  );
+  const { cases: caseList, count: caseCount, fetchError, listLoading } = useSelector((state: RootState) =>
+    selectCasesForList(state),
+  );
   const { helpline } = getHrmConfig();
 
   useEffect(() => {
-    fetchCaseList(currentSettings, helpline);
+    asyncDispatch(dispatch)(ListContent.fetchCaseListAsyncAction(currentSettings, helpline, CASES_PER_PAGE));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSettings, helpline]);
 
   const handleClickViewCase = (currentCase: CaseType) => () => {
-    openCaseDetails(currentCase.id.toString());
+    dispatch(
+      newOpenModalAction(
+        { route: 'case', subroute: 'home', caseId: currentCase.id.toString() },
+        standaloneTask.taskSid,
+      ),
+    );
   };
 
   const closeCaseView = async () => {
-    closeCaseDetails();
+    dispatch(newCloseModalAction(standaloneTask.taskSid));
   };
 
   if (fetchError)
@@ -120,12 +95,13 @@ const CaseList: React.FC<Props> = ({
     );
   }
 
-  if (routing.route === 'contact') {
+  if (routing.route === 'contact' && isContactRoute(routing as AppRoutes)) {
+    const contactRoute = routing as ContactRoute;
     return (
       <StandaloneContainer>
         <CaseLayout>
           <ContactDetails
-            contactId={routing.id}
+            contactId={contactRoute.id}
             enableEditing={true}
             context={DetailsContext.CASE_DETAILS}
             task={standaloneTask}
@@ -135,7 +111,7 @@ const CaseList: React.FC<Props> = ({
     );
   }
 
-  if (isProfileRoute(routing)) {
+  if (isProfileRoute(routing as AppRoutes)) {
     return (
       <StandaloneContainer>
         <ProfileRouter task={standaloneTask} />
@@ -158,6 +134,5 @@ const CaseList: React.FC<Props> = ({
 };
 
 CaseList.displayName = 'CaseList';
-const connected = connector(CaseList);
 
-export default connected;
+export default CaseList;
diff --git a/plugin-hrm-form/src/components/caseList/CaseListTable.tsx b/plugin-hrm-form/src/components/caseList/CaseListTable.tsx
index 5a7e1f6d64..9ae06c9668 100644
--- a/plugin-hrm-form/src/components/caseList/CaseListTable.tsx
+++ b/plugin-hrm-form/src/components/caseList/CaseListTable.tsx
@@ -17,7 +17,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { CircularProgress, TableBody } from '@material-ui/core';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 import InfoIcon from '@material-ui/icons/Info';
 
@@ -43,21 +43,15 @@ type OwnProps = {
   handleClickViewCase: (currentCase: Case) => () => void;
 };
 
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
 /**
  * This component is split to make it easier to read, but is basically a 8 columns Table (8 for data, 1 for the "expand" button)
  */
-const CaseListTable: React.FC<Props> = ({
-  loading,
-  caseList,
-  caseCount,
-  currentPage,
-  updateCaseListPage,
-  handleClickViewCase,
-  currentDefinitionVersion,
-}) => {
+const CaseListTable: React.FC<OwnProps> = ({ loading, caseList, caseCount, handleClickViewCase }) => {
+  const dispatch = useDispatch();
+  const currentDefinitionVersion = useSelector(
+    (state: RootState) => state[namespace].configuration.currentDefinitionVersion,
+  );
+  const currentPage = useSelector((state: RootState) => state[namespace].caseList.currentSettings.page);
   const can = React.useMemo(() => {
     return getInitializedCan();
   }, []);
@@ -118,7 +112,7 @@ const CaseListTable: React.FC<Props> = ({
             transparent
             page={currentPage}
             pagesCount={pagesCount}
-            handleChangePage={updateCaseListPage}
+            handleChangePage={page => dispatch(CaseListSettingsActions.updateCaseListPage(page))}
             disabled={loading}
           />
         </div>
@@ -129,16 +123,4 @@ const CaseListTable: React.FC<Props> = ({
 
 CaseListTable.displayName = 'CaseListTable';
 
-const mapStateToProps = ({ [namespace]: { configuration, caseList } }: RootState) => ({
-  currentDefinitionVersion: configuration.currentDefinitionVersion,
-  currentPage: caseList.currentSettings.page,
-});
-
-const mapDispatchToProps = {
-  updateCaseListPage: CaseListSettingsActions.updateCaseListPage,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-const connected = connector(CaseListTable);
-
-export default connected;
+export default CaseListTable;
diff --git a/plugin-hrm-form/src/components/caseList/CaseListTableHeadCell.tsx b/plugin-hrm-form/src/components/caseList/CaseListTableHeadCell.tsx
index c8b9988396..4318428d46 100644
--- a/plugin-hrm-form/src/components/caseList/CaseListTableHeadCell.tsx
+++ b/plugin-hrm-form/src/components/caseList/CaseListTableHeadCell.tsx
@@ -18,13 +18,12 @@
 import React from 'react';
 import { Template } from '@twilio/flex-ui';
 import { ArrowDownward } from '@material-ui/icons';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { TableHeaderFont, HeaderCell } from '../../styles';
 import { ListCasesQueryParams, SortDirection } from '../../types/types';
 import * as CaseListSettingsActions from '../../states/caseList/settings';
 import { RootState } from '../../states';
-import { getAseloFeatureFlags } from '../../hrmConfig';
 import { caseListBase, namespace } from '../../states/storeNamespaces';
 
 type SortDirectionParam = ListCasesQueryParams['sortDirection'];
@@ -37,24 +36,21 @@ type OwnProps = {
   width?: string;
 };
 
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
 const changeSortDirection = (sortDirection: SortDirectionParam): SortDirectionParam =>
   sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
 
 /**
  * If column prop is filled, the cell will enable sorting by this column
  */
-const CaseListTableHeadCell: React.FC<Props> = ({
+const CaseListTableHeadCell: React.FC<OwnProps> = ({
   column,
   defaultSortDirection = SortDirection.DESC,
   localizedText,
   width,
-  currentSort,
-  updateCaseListSort,
   // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
+  const dispatch = useDispatch();
+  const currentSort = useSelector((state: RootState) => state[namespace][caseListBase].currentSettings.sort);
   const drawSort = () => {
     if (!currentSort || !column || column !== currentSort.sortBy) return null;
 
@@ -85,7 +81,7 @@ const CaseListTableHeadCell: React.FC<Props> = ({
       ? defaultSortDirection
       : changeSortDirection(currentSort?.sortDirection);
 
-    updateCaseListSort({ sortBy: column, sortDirection: updatedSortDirection });
+    dispatch(CaseListSettingsActions.updateCaseListSort({ sortBy: column, sortDirection: updatedSortDirection }));
   };
   const textAlign = () => {
     if (
@@ -114,16 +110,4 @@ const CaseListTableHeadCell: React.FC<Props> = ({
 
 CaseListTableHeadCell.displayName = 'CaseListTableHeadCell';
 
-const mapDispatchToProps = {
-  updateCaseListSort: CaseListSettingsActions.updateCaseListSort,
-};
-
-const mapStateToProps = (state: RootState) => ({
-  currentSort: state[namespace][caseListBase].currentSettings.sort,
-  currentSortCompare: JSON.stringify(state[namespace][caseListBase].currentSettings.sort),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-const connected = connector(CaseListTableHeadCell);
-
-export default connected;
+export default CaseListTableHeadCell;
diff --git a/plugin-hrm-form/src/components/contact/MediaSection/TranscriptSection.tsx b/plugin-hrm-form/src/components/contact/MediaSection/TranscriptSection.tsx
index 2bdfc6499d..8efb1d55af 100644
--- a/plugin-hrm-form/src/components/contact/MediaSection/TranscriptSection.tsx
+++ b/plugin-hrm-form/src/components/contact/MediaSection/TranscriptSection.tsx
@@ -16,7 +16,7 @@
 
 import { Template } from '@twilio/flex-ui';
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import format from 'date-fns/format';
 
@@ -30,7 +30,7 @@ import { MessageList } from '../../Messaging/MessageList';
 import { ErrorFont, ItalicFont, LoadMediaButton, LoadMediaButtonText } from './styles';
 import { contactFormsBase, namespace } from '../../../states/storeNamespaces';
 
-type OwnProps = {
+type Props = {
   contactId: string;
   twilioStoredTranscript?: TwilioStoredMedia;
   externalStoredTranscript?: S3StoredTranscript;
@@ -77,19 +77,18 @@ const groupMessagesByDate = (m: MessageWithSenderInfo, index: number, ms: Messag
 const groupMessagesAndAddSenderInfo = (transcript: TranscriptResult['transcript']): GroupedMessage[] =>
   transcript.messages.map(addSenderInfoToMessage(transcript.participants)).map(groupMessagesByDate);
 
-// eslint-disable-next-line no-use-before-define
-type Props = OwnProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
-
 const TranscriptSection: React.FC<Props> = ({
   contactId,
   twilioStoredTranscript,
   externalStoredTranscript,
   loadConversationIntoOverlay,
-  transcript,
-  loadTranscript,
 
   // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
+  const dispatch = useDispatch();
+  const transcript = useSelector(
+    (state: RootState) => state[namespace][contactFormsBase].existingContacts[contactId]?.transcript,
+  );
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const [updatedGroupMessages, setUpdatedGroupMessages] = useState<GroupedMessage[]>([]);
@@ -143,7 +142,7 @@ const TranscriptSection: React.FC<Props> = ({
       validateFetchResponse(transcriptResponse);
       const transcriptJson: TranscriptResult = await transcriptResponse.json();
 
-      loadTranscript(contactId, transcriptJson.transcript);
+      dispatch(loadTranscript(contactId, transcriptJson.transcript));
 
       setLoading(false);
     } catch (err) {
@@ -240,12 +239,4 @@ const TranscriptSection: React.FC<Props> = ({
   );
 };
 
-const mapStateToProps = (state: RootState, ownProps: OwnProps) => ({
-  transcript: state[namespace][contactFormsBase].existingContacts[ownProps.contactId]?.transcript,
-});
-
-const mapDispatchToProps = {
-  loadTranscript,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TranscriptSection);
+export default TranscriptSection;
diff --git a/plugin-hrm-form/src/components/profile/IdentifierBanner/index.tsx b/plugin-hrm-form/src/components/profile/IdentifierBanner/index.tsx
index 0d74997588..dd07b8e024 100644
--- a/plugin-hrm-form/src/components/profile/IdentifierBanner/index.tsx
+++ b/plugin-hrm-form/src/components/profile/IdentifierBanner/index.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 
 import { useIdentifierByIdentifier, useProfile, useProfileRelationshipsByType } from '../../../states/profile/hooks';
@@ -30,32 +30,13 @@ import { iconsFromTask } from './iconsFromTask';
 import { getHrmConfig } from '../../../hrmConfig';
 import { PermissionActions } from '../../../permissions/actions';
 
-type OwnProps = {
+type Props = {
   task: CustomITask;
   enableClientProfiles?: boolean;
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const { task } = ownProps;
-  const taskId = task.taskSid;
-
-  return {
-    openProfileModal: id => {
-      dispatch(newOpenModalAction({ route: 'profile', profileId: id }, taskId));
-    },
-    openContactsModal: id => {
-      dispatch(newOpenModalAction({ route: 'profile', subroute: 'contacts', profileId: id }, taskId));
-    },
-    openCasesModal: id => {
-      dispatch(newOpenModalAction({ route: 'profile', subroute: 'cases', profileId: id }, taskId));
-    },
-  };
-};
-
-const connector = connect(null, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileIdentifierBanner: React.FC<Props> = ({ task, openProfileModal, openContactsModal, openCasesModal }) => {
+const ProfileIdentifierBanner: React.FC<Props> = ({ task }) => {
+  const dispatch = useDispatch();
   const can = React.useMemo(() => {
     return getInitializedCan();
   }, []);
@@ -91,13 +72,13 @@ const ProfileIdentifierBanner: React.FC<Props> = ({ task, openProfileModal, open
   if (!shouldDisplayBanner || contactsLoading || casesLoading) return null;
 
   const handleViewClients = () => {
-    openProfileModal(profileId);
+    dispatch(newOpenModalAction({ route: 'profile', profileId }, task.taskSid));
   };
   const handleViewContacts = () => {
-    openContactsModal(profileId);
+    dispatch(newOpenModalAction({ route: 'profile', subroute: 'contacts', profileId }, task.taskSid));
   };
   const handleViewCases = () => {
-    openCasesModal(profileId);
+    dispatch(newOpenModalAction({ route: 'profile', subroute: 'cases', profileId }, task.taskSid));
   };
 
   return (
@@ -154,4 +135,4 @@ const ProfileIdentifierBanner: React.FC<Props> = ({ task, openProfileModal, open
 };
 
 ProfileIdentifierBanner.displayName = 'PreviousContactsBanner';
-export default connector(ProfileIdentifierBanner);
+export default ProfileIdentifierBanner;
diff --git a/plugin-hrm-form/src/components/profile/ProfileCases.tsx b/plugin-hrm-form/src/components/profile/ProfileCases.tsx
index 97c3bc4acc..c1d276d81c 100644
--- a/plugin-hrm-form/src/components/profile/ProfileCases.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileCases.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { getInitializedCan } from '../../permissions/rules';
 import { Case } from '../../types/types';
@@ -22,16 +22,14 @@ import CasePreview from '../search/CasePreview';
 import ProfileRelationshipList from './ProfileRelationshipList';
 import * as ProfileTypes from '../../states/profile/types';
 import * as RoutingActions from '../../states/routing/actions';
-import { namespace } from '../../states/storeNamespaces';
-import { RootState } from '../../states';
 import { ProfileCommonProps } from './types';
 import { PermissionActions } from '../../permissions/actions';
+import { selectCounselorsHash } from '../../states/configuration/selectCounselorsHash';
 
-type OwnProps = ProfileCommonProps;
+const ProfileCases: React.FC<ProfileCommonProps> = ({ profileId, task }) => {
+  const dispatch = useDispatch();
+  const counselorsHash = useSelector(selectCounselorsHash);
 
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileCases: React.FC<Props> = ({ profileId, task, counselorsHash, viewCaseDetails }) => {
   const can = React.useMemo(() => {
     return getInitializedCan();
   }, []);
@@ -39,7 +37,12 @@ const ProfileCases: React.FC<Props> = ({ profileId, task, counselorsHash, viewCa
   const renderItem = (cas: Case) => {
     const handleClickViewCase = () => {
       if (can(PermissionActions.VIEW_CASE, cas)) {
-        viewCaseDetails(cas);
+        dispatch(
+          RoutingActions.newOpenModalAction(
+            { route: 'case', context: 'profile', subroute: 'home', caseId: cas.id, isCreating: false },
+            task.taskSid,
+          ),
+        );
       }
     };
 
@@ -63,25 +66,6 @@ const ProfileCases: React.FC<Props> = ({ profileId, task, counselorsHash, viewCa
   );
 };
 
-const mapStateToProps = ({ [namespace]: { configuration } }: RootState) => {
-  const { counselors } = configuration;
-  return {
-    counselorsHash: counselors.hash,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { task: { taskSid } }) => {
-  return {
-    viewCaseDetails: ({ id }: Case) => {
-      dispatch(
-        RoutingActions.newOpenModalAction(
-          { route: 'case', context: 'profile', subroute: 'home', caseId: id, isCreating: false },
-          taskSid,
-        ),
-      );
-    },
-  };
-};
+ProfileCases.displayName = 'ProfileCases';
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
-export default connector(ProfileCases);
+export default ProfileCases;
diff --git a/plugin-hrm-form/src/components/profile/ProfileContactDetails.tsx b/plugin-hrm-form/src/components/profile/ProfileContactDetails.tsx
index 5f33b78d3e..e70d02791c 100644
--- a/plugin-hrm-form/src/components/profile/ProfileContactDetails.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileContactDetails.tsx
@@ -13,11 +13,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { callTypes, DataCallTypes } from 'hrm-types';
 
-import { namespace } from '../../states/storeNamespaces';
 import { RootState } from '../../states';
 import { DetailsContext } from '../../states/contacts/contactDetails';
 import { ChangeRouteMode, isContactRoute, TabbedFormSubroutes } from '../../states/routing/types';
@@ -25,47 +24,47 @@ import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import ContactDetails from '../contact/ContactDetails';
 import { ProfileCommonProps } from './types';
 import { changeRoute, newCloseModalAction } from '../../states/routing/actions';
+import { namespace } from '../../states/storeNamespaces';
 
-type OwnProps = ProfileCommonProps;
+const ProfileContactDetails: React.FC<ProfileCommonProps> = ({ task, ...props }) => {
+  const dispatch = useDispatch();
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }) => {
-  const routingState = state[namespace].routing;
-  const currentRoute = getCurrentTopmostRouteForTask(routingState, taskSid);
+  const routingState = useSelector((state: RootState) => state[namespace].routing);
+  const currentRoute = getCurrentTopmostRouteForTask(routingState, task.taskSid);
   const contactId = isContactRoute(currentRoute) && currentRoute?.id;
 
-  return {
-    contactId,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: OwnProps) => ({
-  closeModal: () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms')),
-  navigateToTab: (tab: TabbedFormSubroutes) =>
-    dispatch(
-      changeRoute({ route: 'tabbed-forms', subroute: tab, autoFocus: false }, task.taskSid, ChangeRouteMode.Replace),
-    ),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileContactDetails: React.FC<Props> = ({ closeModal, navigateToTab, ...props }) => {
   const handleConnectConfirmDialog = (callType: DataCallTypes) => {
-    closeModal();
+    dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms'));
     if (callType === callTypes.caller) {
-      navigateToTab('callerInformation');
+      dispatch(
+        changeRoute(
+          { route: 'tabbed-forms', subroute: 'callerInformation', autoFocus: false },
+          task.taskSid,
+          ChangeRouteMode.Replace,
+        ),
+      );
     } else {
-      navigateToTab('childInformation');
+      dispatch(
+        changeRoute(
+          { route: 'tabbed-forms', subroute: 'childInformation', autoFocus: false },
+          task.taskSid,
+          ChangeRouteMode.Replace,
+        ),
+      );
     }
   };
 
   return (
     <ContactDetails
       {...props}
+      contactId={contactId}
+      task={task}
       onConfirmConnectDialog={handleConnectConfirmDialog}
       context={DetailsContext.CONTACT_SEARCH}
     />
   );
 };
 
-export default connector(ProfileContactDetails);
+ProfileContactDetails.displayName = 'ProfileContactDetails';
+
+export default ProfileContactDetails;
diff --git a/plugin-hrm-form/src/components/profile/ProfileContacts.tsx b/plugin-hrm-form/src/components/profile/ProfileContacts.tsx
index 6f3a0e195c..814e5e88d9 100644
--- a/plugin-hrm-form/src/components/profile/ProfileContacts.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileContacts.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { getInitializedCan } from '../../permissions/rules';
 import { Contact } from '../../types/types';
@@ -25,18 +25,23 @@ import ProfileRelationshipList from './ProfileRelationshipList';
 import { ProfileCommonProps } from './types';
 import { PermissionActions } from '../../permissions/actions';
 
-type OwnProps = ProfileCommonProps;
+const ProfileContacts: React.FC<ProfileCommonProps> = ({ profileId, task }) => {
+  const dispatch = useDispatch();
 
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileContacts: React.FC<Props> = ({ profileId, viewContactDetails }) => {
   const can = React.useMemo(() => {
     return getInitializedCan();
   }, []);
 
   const renderItem = (contact: Contact) => {
     const handleViewDetails = () => {
-      if (can(PermissionActions.VIEW_CONTACT, contact)) viewContactDetails(contact);
+      if (can(PermissionActions.VIEW_CONTACT, contact)) {
+        dispatch(
+          RoutingActions.newOpenModalAction(
+            { route: 'contact', context: 'profile', subroute: 'view', id: contact.id.toString() },
+            task.taskSid,
+          ),
+        );
+      }
     };
 
     return (
@@ -53,19 +58,6 @@ const ProfileContacts: React.FC<Props> = ({ profileId, viewContactDetails }) =>
   );
 };
 
-const mapDispatchToProps = (dispatch, { task: { taskSid } }) => {
-  return {
-    viewContactDetails: ({ id }: Contact) => {
-      dispatch(
-        RoutingActions.newOpenModalAction(
-          { route: 'contact', context: 'profile', subroute: 'view', id: id.toString() },
-          taskSid,
-        ),
-      );
-    },
-  };
-};
-
-const connector = connect(null, mapDispatchToProps);
+ProfileContacts.displayName = 'ProfileContacts';
 
-export default connector(ProfileContacts);
+export default ProfileContacts;
diff --git a/plugin-hrm-form/src/components/profile/ProfileDetails.tsx b/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
index 04c6fbaef7..2fbd2bccd2 100644
--- a/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 import ProfileIcon from '@material-ui/icons/AccountCircleOutlined';
 
@@ -31,21 +31,6 @@ import ProfileDetailsSection from './section/ProfileDetailsSection';
 import ProfileSectionGroup from './section/ProfileSectionGroup';
 import { PermissionActions } from '../../permissions/actions';
 
-type OwnProps = ProfileCommonProps;
-
-const mapDispatchToProps = (dispatch, ownProps: OwnProps) => {
-  const { profileId, task } = ownProps;
-  const taskId = task.taskSid;
-  return {
-    openSectionEditModal: (type: string) => {
-      dispatch(newOpenModalAction({ route: 'profileSectionEdit', type, profileId }, taskId));
-    },
-  };
-};
-
-const connector = connect(null, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
 type Section = {
   titleCode: string;
   renderComponent: () => React.ReactNode;
@@ -53,7 +38,8 @@ type Section = {
   inInlineEditMode?: boolean;
 };
 
-const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal }) => {
+const ProfileDetails: React.FC<ProfileCommonProps> = ({ profileId, task }) => {
+  const dispatch = useDispatch();
   const { profile } = useProfile({ profileId });
   const sectionTypesForms = useProfileSectionTypes();
 
@@ -111,7 +97,9 @@ const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal
         {sectionTypesForms.map(s => (
           <ProfileSectionGroup
             key={s.label}
-            handleEdit={() => openSectionEditModal(s.name)}
+            handleEdit={() =>
+              dispatch(newOpenModalAction({ route: 'profileSectionEdit', type: s.name, profileId }, task.taskSid))
+            }
             profileId={profileId}
             sectionType={s}
             task={task}
@@ -124,4 +112,4 @@ const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal
   );
 };
 
-export default connector(ProfileDetails);
+export default ProfileDetails;
diff --git a/plugin-hrm-form/src/components/profile/ProfileRelationshipList.tsx b/plugin-hrm-form/src/components/profile/ProfileRelationshipList.tsx
index 41b9949aef..a196b79c36 100644
--- a/plugin-hrm-form/src/components/profile/ProfileRelationshipList.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileRelationshipList.tsx
@@ -15,9 +15,10 @@
  */
 
 import React, { useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 import InfoIcon from '@material-ui/icons/Info';
+import { AnyAction } from 'redux';
 
 import Pagination from '../pagination';
 import asyncDispatch from '../../states/asyncDispatch';
@@ -29,40 +30,6 @@ import { RootState } from '../../states';
 import { SearchResultWarningContainer, Text } from '../search/styles';
 import { Row } from '../../styles';
 
-const mapStateToProps = (state: RootState, { profileId, type }) => {
-  const { data, loading, page, total } =
-    profileSelectors.selectProfileRelationshipsByType(state, profileId, type) || {};
-
-  return {
-    data,
-    loading,
-    page,
-    total,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { profileId, type }: OwnProps) => ({
-  loadRelationshipAsync: (page: number) =>
-    asyncDispatch(dispatch)(
-      profileActions.loadRelationshipAsync({
-        profileId,
-        type,
-        page,
-      }),
-    ),
-  updatePage: (page: number) =>
-    dispatch(
-      profileActions.updateRelationshipsPage({
-        profileId,
-        type,
-        page,
-      }),
-    ),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
 type ProfileId = ProfileTypes.Profile['id'];
 
 type OwnProps = {
@@ -71,24 +38,36 @@ type OwnProps = {
   renderItem: (d: ProfileTypes.ProfileRelationshipTypes) => React.ReactNode;
 };
 
-const ProfileRelationshipList: React.FC<Props> = ({
-  data,
-  loading,
-  page,
-  type,
-  total,
-  updatePage,
-  loadRelationshipAsync,
-  renderItem,
-}) => {
+const ProfileRelationshipList: React.FC<OwnProps> = ({ profileId, type, renderItem }) => {
+  const dispatch = useDispatch();
+
+  const { data, loading, page, total } =
+    useSelector((state: RootState) => profileSelectors.selectProfileRelationshipsByType(state, profileId, type)) || {};
+
   const hasData = data && data.length > 0;
 
   useEffect(() => {
     if (loading) return;
-    loadRelationshipAsync(page);
+    asyncDispatch<AnyAction>(dispatch)(
+      profileActions.loadRelationshipAsync({
+        profileId,
+        type,
+        page,
+      }),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page]);
 
+  const handleChangePage = (newPage: number) => {
+    dispatch(
+      profileActions.updateRelationshipsPage({
+        profileId,
+        type,
+        page: newPage,
+      }),
+    );
+  };
+
   const renderData = () => {
     if (loading) {
       return <div>Loading...</div>;
@@ -115,7 +94,7 @@ const ProfileRelationshipList: React.FC<Props> = ({
 
     const pagesCount = Math.ceil(total / PAGE_SIZE);
 
-    return <Pagination page={page} pagesCount={pagesCount} handleChangePage={updatePage} disabled={loading} />;
+    return <Pagination page={page} pagesCount={pagesCount} handleChangePage={handleChangePage} disabled={loading} />;
   };
 
   return (
@@ -126,4 +105,6 @@ const ProfileRelationshipList: React.FC<Props> = ({
   );
 };
 
-export default connector(ProfileRelationshipList);
+ProfileRelationshipList.displayName = 'ProfileRelationshipList';
+
+export default ProfileRelationshipList;
diff --git a/plugin-hrm-form/src/components/profile/ProfileRouter.tsx b/plugin-hrm-form/src/components/profile/ProfileRouter.tsx
index b0d3d945e0..a59785530d 100644
--- a/plugin-hrm-form/src/components/profile/ProfileRouter.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileRouter.tsx
@@ -15,9 +15,9 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useSelector } from 'react-redux';
 
-import { RouterTask } from '../../types/types';
+import { RouterTask, Profile } from '../../types/types';
 import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import { AppRoutes, ProfileRoute } from '../../states/routing/types';
 import { namespace } from '../../states/storeNamespaces';
@@ -29,52 +29,51 @@ import ProfileEdit from './ProfileEdit';
 import ProfileTabs from './ProfileTabs';
 import ProfileSectionEdit from './section/ProfileSectionEdit';
 
-type OwnProps = {
+type Props = {
   task: RouterTask;
 };
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const routingState = state[namespace].routing;
-  const route = getCurrentTopmostRouteForTask(routingState, taskSid);
-  const { profileId } = route as ProfileRoute;
-
-  return {
-    profileId,
-  };
+type ProfileRouterProps = Props & {
+  profileId: Profile['id'];
 };
 
-const connector = connect(mapStateToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const PROFILE_ROUTES: RouteConfig<Props> = [
+const PROFILE_ROUTES: RouteConfig<ProfileRouterProps> = [
   {
     routes: ['profile'],
-    renderComponent: (props: Props) => <ProfileTabs {...props} />,
+    renderComponent: (props: ProfileRouterProps) => <ProfileTabs {...props} />,
   },
   {
     routes: ['profileEdit'],
-    renderComponent: (props: Props) => <ProfileEdit {...props} />,
+    renderComponent: (props: ProfileRouterProps) => <ProfileEdit {...props} />,
   },
   {
     routes: ['profileSectionEdit'],
-    renderComponent: (props: Props) => {
+    renderComponent: (props: ProfileRouterProps) => {
       return <ProfileSectionEdit {...props} />;
     },
   },
   {
     contextRoutes: ['contact'],
-    renderComponent: (props: Props) => <ProfileContactDetails {...props} />,
+    renderComponent: (props: ProfileRouterProps) => <ProfileContactDetails {...props} />,
   },
   {
     contextRoutes: ['case'],
-    renderComponent: (props: Props) => <ProfileCaseDetails {...props} />,
+    renderComponent: (props: ProfileRouterProps) => <ProfileCaseDetails {...props} />,
   },
 ];
 
 export const isProfileRoute = (routing: AppRoutes) => shouldHandleRoute(routing, PROFILE_ROUTES, 'profile');
 
 const ProfileRouter: React.FC<Props> = props => {
-  return <Router {...props} routeConfig={PROFILE_ROUTES} />;
+  const profileId = useSelector((state: RootState) => {
+    const routingState = state[namespace].routing;
+    const route = getCurrentTopmostRouteForTask(routingState, props.task.taskSid);
+    return (route as ProfileRoute).profileId;
+  });
+
+  const routerProps: ProfileRouterProps = { ...props, profileId };
+
+  return <Router {...routerProps} routeConfig={PROFILE_ROUTES} />;
 };
 
-export default connector(ProfileRouter);
+export default ProfileRouter;
diff --git a/plugin-hrm-form/src/components/profile/ProfileTabs.tsx b/plugin-hrm-form/src/components/profile/ProfileTabs.tsx
index d7f21eb62c..ba9fcfe914 100644
--- a/plugin-hrm-form/src/components/profile/ProfileTabs.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileTabs.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Tab as TwilioTab, Template } from '@twilio/flex-ui';
 import { CircularProgress } from '@material-ui/core';
 
@@ -33,33 +33,15 @@ import type { RootState } from '../../states';
 import type { ProfileRoute } from '../../states/routing/types';
 import type { ProfileCommonProps } from './types';
 
-type OwnProps = ProfileCommonProps;
+const ProfileTabs: React.FC<ProfileCommonProps> = ({ profileId, task }) => {
+  const dispatch = useDispatch();
+  const { taskSid } = task;
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const routingState = state[namespace].routing;
-  const route = getCurrentTopmostRouteForTask(routingState, taskSid);
-  const currentTab = (route as ProfileRoute).subroute || 'details';
-
-  return {
-    currentTab,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { task }: OwnProps) => ({
-  changeProfileTab: (id, subroute) =>
-    dispatch(
-      RoutingActions.changeRoute(
-        { route: 'profile', profileId: id, subroute },
-        task.taskSid,
-        RoutingTypes.ChangeRouteMode.Replace,
-      ),
-    ),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileTabs: React.FC<Props> = ({ profileId, task, currentTab, changeProfileTab }) => {
+  const currentTab = useSelector((state: RootState) => {
+    const routingState = state[namespace].routing;
+    const route = getCurrentTopmostRouteForTask(routingState, taskSid);
+    return (route as ProfileRoute).subroute || 'details';
+  });
   const { canView } = useProfile({ profileId });
   const { total: contactsCount, loading: contactsLoading } = useProfileRelationshipsByType({
     profileId,
@@ -111,7 +93,15 @@ const ProfileTabs: React.FC<Props> = ({ profileId, task, currentTab, changeProfi
     <NavigableContainer task={task} titleCode="Profile-Title">
       <StyledTabs
         selectedTabName={currentTab}
-        onTabSelected={(selectedTab: RoutingTypes.ProfileTabs) => changeProfileTab(profileId, selectedTab)}
+        onTabSelected={(selectedTab: RoutingTypes.ProfileTabs) =>
+          dispatch(
+            RoutingActions.changeRoute(
+              { route: 'profile', profileId, subroute: selectedTab },
+              taskSid,
+              RoutingTypes.ChangeRouteMode.Replace,
+            ),
+          )
+        }
         alignment="center"
         keepTabsMounted={false}
       >
@@ -121,4 +111,4 @@ const ProfileTabs: React.FC<Props> = ({ profileId, task, currentTab, changeProfi
   );
 };
 
-export default connector(ProfileTabs);
+export default ProfileTabs;
diff --git a/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx b/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
index 76637968fa..9fe1c67e71 100644
--- a/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
+++ b/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useState } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { namespace } from '../../../states/storeNamespaces';
 import { RootState } from '../../../states';
@@ -30,28 +30,16 @@ import { useEditProfileSection } from '../../../states/profile/hooks';
 import useProfileSectionTypes from '../../../states/configuration/hooks/useProfileSectionTypes';
 import { ProfileCommonProps } from '../types';
 
-type OwnProps = ProfileCommonProps;
+type Props = ProfileCommonProps;
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const routingState = state[namespace].routing;
-  const currentRouteStack = getCurrentTopmostRouteForTask(routingState, taskSid);
-  const sectionType = (currentRouteStack as ProfileSectionEditRoute)?.type;
+const ProfileSectionEdit = ({ task, profileId }: Props) => {
+  const dispatch = useDispatch();
 
-  return {
-    sectionType,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { task }: OwnProps) => {
-  return {
-    closeModal: () => dispatch(RoutingActions.newCloseModalAction(task.taskSid)),
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const ProfileSectionEdit = ({ task, profileId, sectionType, closeModal }: Props) => {
+  const sectionType = useSelector((state: RootState) => {
+    const routingState = state[namespace].routing;
+    const currentRouteStack = getCurrentTopmostRouteForTask(routingState, task.taskSid);
+    return (currentRouteStack as ProfileSectionEditRoute)?.type;
+  });
   const { section, createProfileSection, updateProfileSection } = useEditProfileSection({ profileId, sectionType });
   const sectionTypesForms = useProfileSectionTypes();
   const sectionTypesForm = sectionTypesForms.find(sectionTypesForm => sectionTypesForm.name === sectionType);
@@ -62,11 +50,11 @@ const ProfileSectionEdit = ({ task, profileId, sectionType, closeModal }: Props)
   const handleEdit = () => {
     if (!sectionId) {
       createProfileSection({ profileId, sectionType, content });
-      closeModal();
+      dispatch(RoutingActions.newCloseModalAction(task.taskSid));
       return;
     }
     updateProfileSection({ profileId, sectionType, content, sectionId });
-    closeModal();
+    dispatch(RoutingActions.newCloseModalAction(task.taskSid));
   };
 
   return (
@@ -95,4 +83,4 @@ const ProfileSectionEdit = ({ task, profileId, sectionType, closeModal }: Props)
   );
 };
 
-export default connector(ProfileSectionEdit);
+export default ProfileSectionEdit;
diff --git a/plugin-hrm-form/src/components/profileList/ProfileList.tsx b/plugin-hrm-form/src/components/profileList/ProfileList.tsx
index 8d0535085d..5e6fa6ef87 100644
--- a/plugin-hrm-form/src/components/profileList/ProfileList.tsx
+++ b/plugin-hrm-form/src/components/profileList/ProfileList.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { StandaloneITask } from '../../types/types';
 import { ListContainer, StandaloneContainer } from '../../styles';
@@ -24,26 +24,18 @@ import ProfileListTable from './ProfileListTable';
 import ProfileRouter, { isProfileRoute } from '../profile/ProfileRouter';
 import { RootState } from '../../states';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { AppRoutes } from '../../states/routing/types';
 
 const standaloneTask: StandaloneITask = {
   taskSid: 'standalone-task-sid',
   attributes: { isContactlessTask: false },
 };
 
-type OwnProps = {};
+const ProfileListPage: React.FC = () => {
+  const routing = useSelector((state: RootState) =>
+    selectCurrentTopmostRouteForTask(state, standaloneTask.taskSid),
+  ) as AppRoutes;
 
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const mapStateToProps = (state: RootState) => {
-  return {
-    routing: selectCurrentTopmostRouteForTask(state, standaloneTask.taskSid) ?? {
-      route: 'profile-list',
-      subroute: 'profile-list',
-    },
-  };
-};
-
-const ProfileListPage: React.FC<Props> = ({ routing }) => {
   if (isProfileRoute(routing))
     return (
       <StandaloneContainer>
@@ -59,7 +51,5 @@ const ProfileListPage: React.FC<Props> = ({ routing }) => {
   );
 };
 
-const connector = connect(mapStateToProps);
-
 // eslint-disable-next-line import/no-unused-modules
-export default connector(ProfileListPage);
+export default ProfileListPage;
diff --git a/plugin-hrm-form/src/components/resources/ReferrableResources.tsx b/plugin-hrm-form/src/components/resources/ReferrableResources.tsx
index 24acfa1edc..ed8ca0348d 100644
--- a/plugin-hrm-form/src/components/resources/ReferrableResources.tsx
+++ b/plugin-hrm-form/src/components/resources/ReferrableResources.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { RootState } from '../../states';
 import { ResourcePage } from '../../states/resources';
@@ -24,15 +24,8 @@ import SearchResources from './search/SearchResources';
 import ViewResource from './resourceView/ViewResource';
 import { namespace, referrableResourcesBase } from '../../states/storeNamespaces';
 
-const mapStateToProps = (state: RootState) => ({
-  route: state[namespace][referrableResourcesBase].route,
-});
-
-const connector = connect(mapStateToProps);
-
-type Props = ReturnType<typeof mapStateToProps>;
-
-const ReferrableResources: React.FC<Props> = ({ route }) => {
+const ReferrableResources: React.FC = () => {
+  const route = useSelector((state: RootState) => state[namespace][referrableResourcesBase].route);
   switch (route.page) {
     case ResourcePage.Search: {
       return <SearchResources />;
@@ -51,4 +44,4 @@ const ReferrableResources: React.FC<Props> = ({ route }) => {
 
 ReferrableResources.displayName = 'ReferrableResources';
 
-export default connector(ReferrableResources);
+export default ReferrableResources;
diff --git a/plugin-hrm-form/src/components/resources/resourceView/ViewResource.tsx b/plugin-hrm-form/src/components/resources/resourceView/ViewResource.tsx
index 87894f5594..23606ccceb 100644
--- a/plugin-hrm-form/src/components/resources/resourceView/ViewResource.tsx
+++ b/plugin-hrm-form/src/components/resources/resourceView/ViewResource.tsx
@@ -15,8 +15,8 @@
  */
 
 /* eslint-disable react/jsx-max-depth */
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { AnyAction } from 'redux';
 import { Template } from '@twilio/flex-ui';
 
@@ -24,73 +24,63 @@ import { RootState } from '../../../states';
 import { Box, Column } from '../../../styles';
 import SearchResultsBackButton from '../../search/SearchResults/SearchResultsBackButton';
 import { ResourceTitle, ViewResourceArea, ResourceViewContainer } from '../styles';
-import { loadResourceAsyncAction, navigateToSearchAction, ResourceLoadStatus } from '../../../states/resources';
+import {
+  loadResourceAsyncAction,
+  navigateToSearchAction,
+  selectResourceData,
+  selectResourceError,
+} from '../../../states/resources';
 import asyncDispatch from '../../../states/asyncDispatch';
-import { namespace, referrableResourcesBase } from '../../../states/storeNamespaces';
 import { ResourceViewAttributes } from '../mappingComponents';
 
-type OwnProps = {
+type Props = {
   resourceId: string;
 };
 
-const mapStateToProps = (state: RootState, { resourceId }: OwnProps) => {
-  const resourceState = state[namespace][referrableResourcesBase].resources[resourceId];
-  if (!resourceState || resourceState.status === ResourceLoadStatus.Loading) {
-    return {};
-  }
-  return {
-    resource: resourceState.resource,
-    error: resourceState.error,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, { resourceId }: OwnProps) => ({
-  loadViewedResource: () => asyncDispatch(dispatch)(loadResourceAsyncAction(resourceId)),
-  navigateToSearch: () => dispatch(navigateToSearchAction()),
-});
+const ViewResource: React.FC<Props> = ({ resourceId }) => {
+  const dispatch = useDispatch();
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
+  const resource = useSelector((state: RootState) => selectResourceData(state, resourceId));
+  const error = useSelector((state: RootState) => selectResourceError(state, resourceId));
 
-type Props = OwnProps & ConnectedProps<typeof connector>;
+  if (resource || error) {
+    const { name } = resource || {};
 
-const ViewResource: React.FC<Props> = ({ resource, error, loadViewedResource, navigateToSearch }) => {
-  if (!resource && !error) {
-    loadViewedResource();
-    return <div>Loading...</div>;
+    return (
+      <ResourceViewContainer>
+        <Column>
+          <Box marginTop="10px" marginBottom="10px">
+            <SearchResultsBackButton
+              text={<Template code="SearchResultsIndex-BackToResults" />}
+              // eslint-disable-next-line no-empty-function
+              handleBack={() => dispatch(navigateToSearchAction())}
+            />
+          </Box>
+          <ViewResourceArea>
+            {error && (
+              <>
+                <ResourceTitle>
+                  <Template code="Resources-LoadResourceError" />
+                </ResourceTitle>
+                <p>{error.message}</p>
+              </>
+            )}
+            {resource && (
+              <>
+                <ResourceTitle data-testid="resource-title">{name}</ResourceTitle>
+                <ResourceViewAttributes resource={resource} />
+              </>
+            )}
+          </ViewResourceArea>
+        </Column>
+      </ResourceViewContainer>
+    );
   }
-  const { name } = resource;
 
-  return (
-    <ResourceViewContainer>
-      <Column>
-        <Box marginTop="10px" marginBottom="10px">
-          <SearchResultsBackButton
-            text={<Template code="SearchResultsIndex-BackToResults" />}
-            // eslint-disable-next-line no-empty-function
-            handleBack={() => navigateToSearch()}
-          />
-        </Box>
-        <ViewResourceArea>
-          {error && (
-            <>
-              <ResourceTitle>
-                <Template code="Resources-LoadResourceError" />
-              </ResourceTitle>
-              <p>{error.message}</p>
-            </>
-          )}
-          {resource && (
-            <>
-              <ResourceTitle data-testid="resource-title">{name}</ResourceTitle>
-              <ResourceViewAttributes resource={resource} />
-            </>
-          )}
-        </ViewResourceArea>
-      </Column>
-    </ResourceViewContainer>
-  );
+  asyncDispatch<AnyAction>(dispatch)(loadResourceAsyncAction(resourceId));
+  return <div>Loading...</div>;
 };
 
 ViewResource.displayName = 'ViewResource';
 
-export default connector(ViewResource);
+export default ViewResource;
diff --git a/plugin-hrm-form/src/components/resources/search/SearchResources.tsx b/plugin-hrm-form/src/components/resources/search/SearchResources.tsx
index 05343db0ac..f07cd968cb 100644
--- a/plugin-hrm-form/src/components/resources/search/SearchResources.tsx
+++ b/plugin-hrm-form/src/components/resources/search/SearchResources.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { RootState } from '../../../states';
 import { ResourceSearchStatus } from '../../../states/resources/search';
@@ -23,20 +23,8 @@ import SearchResourcesForm from './SearchResourcesForm';
 import SearchResourcesResults from './SearchResourcesResults';
 import { namespace, referrableResourcesBase } from '../../../states/storeNamespaces';
 
-type OwnProps = {};
-
-const mapStateToProps = (state: RootState) => {
-  const { status } = state[namespace][referrableResourcesBase].search;
-  return {
-    status,
-  };
-};
-
-const connector = connect(mapStateToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const SearchResources: React.FC<Props> = ({ status }) => {
+const SearchResources: React.FC = () => {
+  const status = useSelector((state: RootState) => state[namespace][referrableResourcesBase].search.status);
   switch (status) {
     case ResourceSearchStatus.NotSearched:
       return <SearchResourcesForm />;
@@ -52,4 +40,4 @@ const SearchResources: React.FC<Props> = ({ status }) => {
 
 SearchResources.displayName = 'ViewResource';
 
-export default connector(SearchResources);
+export default SearchResources;
diff --git a/plugin-hrm-form/src/components/resources/search/SearchResourcesResults.tsx b/plugin-hrm-form/src/components/resources/search/SearchResourcesResults.tsx
index d32742c90c..ab719da92c 100644
--- a/plugin-hrm-form/src/components/resources/search/SearchResourcesResults.tsx
+++ b/plugin-hrm-form/src/components/resources/search/SearchResourcesResults.tsx
@@ -14,8 +14,8 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { AnyAction } from 'redux';
 import { Template } from '@twilio/flex-ui';
 
@@ -45,53 +45,17 @@ import ResourcePreview from './ResourcePreview';
 import { namespace, referrableResourcesBase } from '../../../states/storeNamespaces';
 import { ResourcesSearchResultsDescriptionDetails } from '../mappingComponents';
 
-type OwnProps = {};
+const SearchResourcesResults: React.FC = () => {
+  const dispatch = useDispatch();
 
-const mapStateToProps = (state: RootState) => {
-  const searchState = state[namespace][referrableResourcesBase].search;
+  const searchState = useSelector((state: RootState) => state[namespace][referrableResourcesBase].search);
   const { error, status, currentPage, parameters } = searchState;
   const currentPageResults = getCurrentPageResults(searchState);
-  return {
-    parameters,
-    currentPageResults,
-    currentPage,
-    error,
-    status,
-    resultPageCount: getPageCount(searchState),
-    resultCount: searchState.results.length,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
-  const searchAsyncDispatch = asyncDispatch<AnyAction>(dispatch);
-  return {
-    returnToForm: () => dispatch(returnToSearchFormAction()),
-    viewResource: (id: string) => dispatch(viewResourceAction(id)),
-    changePage: (page: number) => dispatch(changeResultPageAction(page)),
-    retrievePageResults: (parameters: SearchSettings, page: number) =>
-      searchAsyncDispatch(searchResourceAsyncAction(parameters, page, false)),
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const SearchResourcesResults: React.FC<Props> = ({
-  parameters,
-  currentPageResults,
-  error,
-  resultPageCount,
-  resultCount,
-  currentPage,
-  changePage,
-  retrievePageResults,
-  returnToForm,
-  viewResource,
-}) => {
+  const resultPageCount = getPageCount(searchState);
+  const resultCount = searchState.results.length;
   // If any results for the current page are undefined (i.e. expected to exist given the total result count but not in  redux yet) query the back end
   if (!currentPageResults.every(res => res)) {
-    retrievePageResults(parameters, currentPage);
+    asyncDispatch<AnyAction>(dispatch)(searchResourceAsyncAction(parameters, currentPage, false));
     return null;
   }
 
@@ -102,7 +66,7 @@ const SearchResourcesResults: React.FC<Props> = ({
           <SearchResultsBackButton
             text={<Template code="SearchResultsIndex-Back" />}
             // eslint-disable-next-line no-empty-function
-            handleBack={returnToForm}
+            handleBack={() => dispatch(returnToSearchFormAction())}
           />
         </Box>
         <SearchFormTopRule />
@@ -132,7 +96,10 @@ const SearchResourcesResults: React.FC<Props> = ({
         <ResourcesSearchResultsList>
           {currentPageResults.map(result => (
             <li key={result.id}>
-              <ResourcePreview resourceResult={result} onClickViewResource={() => viewResource(result.id)} />
+              <ResourcePreview
+                resourceResult={result}
+                onClickViewResource={() => dispatch(viewResourceAction(result.id))}
+              />
             </li>
           ))}
         </ResourcesSearchResultsList>
@@ -142,7 +109,7 @@ const SearchResourcesResults: React.FC<Props> = ({
               transparent
               page={currentPage}
               pagesCount={resultPageCount}
-              handleChangePage={pageNumber => changePage(pageNumber)}
+              handleChangePage={pageNumber => dispatch(changeResultPageAction(pageNumber))}
             />
           </div>
         ) : null}
@@ -153,4 +120,4 @@ const SearchResourcesResults: React.FC<Props> = ({
 
 SearchResourcesResults.displayName = 'ViewResource';
 
-export default connector(SearchResourcesResults);
+export default SearchResourcesResults;
diff --git a/plugin-hrm-form/src/components/router/Router.tsx b/plugin-hrm-form/src/components/router/Router.tsx
index 59ae9fe762..8ec44f4fd0 100644
--- a/plugin-hrm-form/src/components/router/Router.tsx
+++ b/plugin-hrm-form/src/components/router/Router.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { RootState } from '../../states';
 import { namespace } from '../../states/storeNamespaces';
@@ -60,22 +60,13 @@ export type RouteConfig<TProps> = RouteConfigEntry<TProps>[];
 
 type RouteConfigAny = RouteConfig<any>;
 
-type OwnProps = {
+type RouterProps = {
   routeConfig: RouteConfigAny;
   task: RouterTask;
+  [key: string]: any; // Allow additional props to be passed through
 };
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const routingState = state[namespace].routing;
-  const routing = getCurrentTopmostRouteForTask(routingState, taskSid);
-
-  return {
-    routing,
-  };
-};
-
-const connector = connect(mapStateToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
+type Props = RouterProps;
 
 const getRootRoutes = (routeConfig: RouteConfigAny) =>
   routeConfig
@@ -122,8 +113,12 @@ export const shouldHandleRoute = (routing: AppRoutes, routeConfig: RouteConfigAn
 };
 
 const Router: React.FC<Props> = props => {
-  const { routeConfig, routing } = props;
-  return getHandleableRoute(routeConfig, routing)?.renderComponent(props) || null;
+  const { routeConfig, task } = props;
+  const routing = useSelector((state: RootState) => {
+    const routingState = state[namespace].routing;
+    return getCurrentTopmostRouteForTask(routingState, task.taskSid);
+  });
+  return getHandleableRoute(routeConfig, routing)?.renderComponent({ ...props, routing }) || null;
 };
 
-export default connector(Router);
+export default Router;
diff --git a/plugin-hrm-form/src/components/search/ContactPreview/index.tsx b/plugin-hrm-form/src/components/search/ContactPreview/index.tsx
index 9e2628d0f8..e0b468eb5c 100644
--- a/plugin-hrm-form/src/components/search/ContactPreview/index.tsx
+++ b/plugin-hrm-form/src/components/search/ContactPreview/index.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { callTypes } from 'hrm-types';
 
 import ContactHeader from './ContactHeader';
@@ -37,15 +37,6 @@ type ContactPreviewProps = {
   handleViewDetails: () => void;
 };
 
-const mapStateToProps = (state: RootState, { contact }: ContactPreviewProps) => ({
-  definitionVersions: selectDefinitionVersions(state),
-  counselorName: selectCounselorName(state, contact.twilioWorkerId),
-});
-
-const connector = connect(mapStateToProps);
-
-type Props = ContactPreviewProps & ConnectedProps<typeof connector>;
-
 /**
  * Since different helplines can have different forms, this function is a
  * best-effort for finding out the name.
@@ -80,7 +71,12 @@ const getCallerName = (rawJson: ContactRawJson) => {
   return undefined;
 };
 
-const ContactPreview: React.FC<Props> = ({ contact, handleViewDetails, definitionVersions, counselorName }) => {
+const ContactPreview: React.FC<ContactPreviewProps> = ({ contact, handleViewDetails }) => {
+  const dispatch = useDispatch();
+
+  const definitionVersions = useSelector(selectDefinitionVersions);
+  const counselorName = useSelector((state: RootState) => selectCounselorName(state, contact.twilioWorkerId));
+
   const { callType } = contact.rawJson;
   const callerName = getCallerName(contact.rawJson);
   const { definitionVersion: versionId, caseInformation } = contact.rawJson;
@@ -93,9 +89,11 @@ const ContactPreview: React.FC<Props> = ({ contact, handleViewDetails, definitio
 
   useEffect(() => {
     if (versionId && !definitionVersions[versionId]) {
-      getDefinitionVersion(versionId).then(definitionVersion => updateDefinitionVersion(versionId, definitionVersion));
+      getDefinitionVersion(versionId).then(definitionVersion =>
+        dispatch(updateDefinitionVersion(versionId, definitionVersion)),
+      );
     }
-  }, [versionId, definitionVersions]);
+  }, [versionId, definitionVersions, dispatch]);
 
   return (
     <Flex width="100%">
@@ -134,4 +132,4 @@ const ContactPreview: React.FC<Props> = ({ contact, handleViewDetails, definitio
 
 ContactPreview.displayName = 'ContactPreview';
 
-export default connector(ContactPreview);
+export default ContactPreview;
diff --git a/plugin-hrm-form/src/components/search/SearchResults/SearchResultsQueryTemplate.tsx b/plugin-hrm-form/src/components/search/SearchResults/SearchResultsQueryTemplate.tsx
index 631bf1d3c2..2136151777 100644
--- a/plugin-hrm-form/src/components/search/SearchResults/SearchResultsQueryTemplate.tsx
+++ b/plugin-hrm-form/src/components/search/SearchResults/SearchResultsQueryTemplate.tsx
@@ -19,10 +19,10 @@ import { Template } from '@twilio/flex-ui';
 
 import { RootState } from '../../../states';
 import { Bold, FontOpenSans } from '../../../styles';
-import { CustomITask } from '../../../types/types';
+import { CustomITask, StandaloneITask } from '../../../types/types';
 
 type SearchResultsQueryTemplateProps = {
-  task: CustomITask;
+  task: CustomITask | StandaloneITask;
   searchContext: any;
   subroute: string;
   casesCount: number;
diff --git a/plugin-hrm-form/src/components/search/SearchResults/index.tsx b/plugin-hrm-form/src/components/search/SearchResults/index.tsx
index 0a3a8914a1..667c485e21 100644
--- a/plugin-hrm-form/src/components/search/SearchResults/index.tsx
+++ b/plugin-hrm-form/src/components/search/SearchResults/index.tsx
@@ -16,14 +16,14 @@
 
 /* eslint-disable react/prop-types */
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Tab as TwilioTab, Template } from '@twilio/flex-ui';
 import InfoIcon from '@material-ui/icons/Info';
+import { AnyAction } from 'redux';
 
 import ContactPreview from '../ContactPreview';
 import CasePreview from '../CasePreview';
-import { Contact, CustomITask, SearchCaseResult, SearchContactResult } from '../../../types/types';
+import { Contact, CustomITask, StandaloneITask, SearchCaseResult, SearchContactResult } from '../../../types/types';
 import { Row } from '../../../styles';
 import {
   NoResultTextLink,
@@ -39,9 +39,9 @@ import {
 } from '../styles';
 import Pagination from '../../pagination';
 import { getInitializedCan } from '../../../permissions/rules';
-import { namespace } from '../../../states/storeNamespaces';
 import { RootState } from '../../../states';
-import { getCurrentTopmostRouteForTask } from '../../../states/routing/getRoute';
+import { namespace } from '../../../states/storeNamespaces';
+import { selectCurrentTopmostRouteForTask } from '../../../states/routing/getRoute';
 import * as RoutingActions from '../../../states/routing/actions';
 import { changeRoute, newOpenModalAction } from '../../../states/routing/actions';
 import { AppRoutes, ChangeRouteMode, SearchResultRoute, isCaseRoute } from '../../../states/routing/types';
@@ -53,12 +53,14 @@ import { createCaseAsyncAction } from '../../../states/case/saveCase';
 import asyncDispatch from '../../../states/asyncDispatch';
 import { SearchResultsQueryTemplate } from './SearchResultsQueryTemplate';
 import { PermissionActions } from '../../../permissions/actions';
+import { selectCounselorsHash } from '../../../states/configuration/selectCounselorsHash';
+import selectSearchStateForTask from '../../../states/search/selectSearchStateForTask';
 
 export const CONTACTS_PER_PAGE = 20;
 export const CASES_PER_PAGE = 20;
 
-type OwnProps = {
-  task: CustomITask;
+type Props = {
+  task: CustomITask | StandaloneITask;
   searchContactsResults: SearchContactResult;
   searchCasesResults: SearchCaseResult;
   onlyDataContacts: boolean;
@@ -67,11 +69,11 @@ type OwnProps = {
   handleSearchCases: (offset: number) => void;
   toggleNonDataContacts: () => void;
   toggleClosedCases: () => void;
-  handleBack: () => void;
+  handleBack?: () => void;
   saveUpdates: () => Promise<void>;
 };
 
-type Props = OwnProps & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+/* eslint-disable sonarjs/cognitive-complexity */
 const SearchResults: React.FC<Props> = ({
   task,
   searchContactsResults,
@@ -82,26 +84,29 @@ const SearchResults: React.FC<Props> = ({
   handleSearchCases,
   toggleNonDataContacts,
   toggleClosedCases,
-  viewContactDetails,
-  changeCaseResultPage,
-  changeContactResultPage,
-  viewCaseDetails,
-  newCase,
-  counselorsHash,
-  routing,
-  isRequestingCases,
-  isRequestingContacts,
-  caseRefreshRequired,
-  contactRefreshRequired,
-  openModal,
-  contact,
   saveUpdates,
-  createCaseAsyncAction,
-  closeModal,
-  contextContactId,
-  searchContext,
 }) => {
-  const { subroute: currentResultPage, casesPage, contactsPage } = routing as SearchResultRoute;
+  const dispatch = useDispatch();
+  const taskId = task.taskSid;
+
+  const routing = useSelector((state: RootState) =>
+    selectCurrentTopmostRouteForTask(state, taskId),
+  ) as SearchResultRoute;
+  const contextContactId = (isCaseRoute(routing) || routing.route === 'search') && routing.contextContactId;
+  const searchContext = contextContactId ? `contact-${contextContactId}` : 'root';
+
+  const searchState = useSelector((state: RootState) => selectSearchStateForTask(state, taskId, searchContext));
+  const { isRequesting: isRequestingContacts, isRequestingCases, caseRefreshRequired, contactRefreshRequired } =
+    searchState || {};
+
+  const counselorsHash = useSelector(selectCounselorsHash);
+  const contact = useSelector((state: RootState) => {
+    const { activeContacts } = state[namespace];
+    const { draftContact, savedContact } = activeContacts.existingContacts[searchContext] ?? {};
+    return getUnsavedContact(savedContact, draftContact);
+  });
+
+  const { subroute: currentResultPage, casesPage, contactsPage } = routing;
 
   const can = React.useMemo(() => {
     return getInitializedCan();
@@ -122,6 +127,39 @@ const SearchResults: React.FC<Props> = ({
   if (routing.route !== 'search' || (routing.subroute !== 'case-results' && routing.subroute !== 'contact-results')) {
     return null;
   }
+
+  const changeContactResultPage = (contactsPage: number, currentRoute: SearchResultRoute) => {
+    dispatch(
+      changeRoute({ ...currentRoute, subroute: 'contact-results', contactsPage }, taskId, ChangeRouteMode.Replace),
+    );
+  };
+
+  const changeCaseResultPage = (casesPage: number, currentRoute: SearchResultRoute) => {
+    dispatch(changeRoute({ ...currentRoute, subroute: 'case-results', casesPage }, taskId, ChangeRouteMode.Replace));
+  };
+
+  const viewCaseDetails = (caseId: string, contextContactId: string) => {
+    dispatch(
+      newOpenModalAction({ contextContactId, route: 'case', subroute: 'home', isCreating: false, caseId }, taskId),
+    );
+  };
+
+  const newCase = () => {
+    dispatch(newOpenModalAction({ route: 'case', subroute: 'home', isCreating: true, caseId: undefined }, taskId));
+  };
+
+  const viewContactDetails = ({ id }: Contact) => {
+    dispatch(newOpenModalAction({ route: 'contact', subroute: 'view', id: id.toString() }, taskId));
+  };
+
+  const openModal = (route: AppRoutes) => {
+    dispatch(RoutingActions.newOpenModalAction(route, taskId));
+  };
+
+  const closeModal = () => {
+    dispatch(RoutingActions.newCloseModalAction(taskId));
+  };
+
   const setContactsPage = (page: number) => changeContactResultPage(page, routing);
   const setCasesPage = (page: number) => changeCaseResultPage(page, routing);
 
@@ -177,7 +215,7 @@ const SearchResults: React.FC<Props> = ({
 
     try {
       await saveUpdates();
-      await createCaseAsyncAction(contact, workerSid, definitionVersion);
+      await asyncDispatch<AnyAction>(dispatch)(createCaseAsyncAction(contact, workerSid, definitionVersion));
       closeModal();
       newCase();
     } catch (error) {
@@ -405,66 +443,7 @@ const SearchResults: React.FC<Props> = ({
     </>
   );
 };
+/* eslint-enable sonarjs/cognitive-complexity */
 SearchResults.displayName = 'SearchResults';
 
-const mapStateToProps = (state: RootState, { task }: OwnProps) => {
-  const { searchContacts, configuration, routing, activeContacts } = state[namespace];
-  const taskId = task.taskSid;
-  const currentRoute = getCurrentTopmostRouteForTask(routing, taskId);
-  const contextContactId =
-    (isCaseRoute(currentRoute) || currentRoute.route === 'search') && currentRoute.contextContactId;
-  const searchContext = contextContactId ? `contact-${contextContactId}` : 'root';
-  const { isRequesting, isRequestingCases, caseRefreshRequired, contactRefreshRequired } =
-    searchContacts?.tasks[taskId][searchContext] || {};
-  const { counselors } = configuration;
-  const { draftContact, savedContact } = activeContacts.existingContacts[searchContext] ?? {};
-
-  return {
-    isRequestingContacts: isRequesting,
-    isRequestingCases,
-    caseRefreshRequired,
-    contactRefreshRequired,
-    counselorsHash: counselors.hash,
-    routing: getCurrentTopmostRouteForTask(routing, taskId),
-    searchCase: searchContacts.tasks[task.taskSid].searchExistingCaseStatus,
-    contact: getUnsavedContact(savedContact, draftContact),
-    searchContext,
-    contextContactId,
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const taskId = ownProps.task.taskSid;
-
-  return {
-    changeContactResultPage: (contactsPage: number, currentRoute: SearchResultRoute) => {
-      dispatch(
-        changeRoute({ ...currentRoute, subroute: 'contact-results', contactsPage }, taskId, ChangeRouteMode.Replace),
-      );
-    },
-    changeCaseResultPage: (casesPage: number, currentRoute: SearchResultRoute) => {
-      dispatch(changeRoute({ ...currentRoute, subroute: 'case-results', casesPage }, taskId, ChangeRouteMode.Replace));
-    },
-    viewCaseDetails: (caseId: string, contextContactId: string) => {
-      dispatch(
-        newOpenModalAction({ contextContactId, route: 'case', subroute: 'home', isCreating: false, caseId }, taskId),
-      );
-    },
-    newCase: () => {
-      dispatch(newOpenModalAction({ route: 'case', subroute: 'home', isCreating: true, caseId: undefined }, taskId));
-    },
-    viewContactDetails: ({ id }: Contact) => {
-      dispatch(newOpenModalAction({ route: 'contact', subroute: 'view', id: id.toString() }, taskId));
-    },
-    changeRoute: bindActionCreators(RoutingActions.changeRoute, dispatch),
-    openModal: (route: AppRoutes) => dispatch(RoutingActions.newOpenModalAction(route, taskId)),
-    closeModal: () => dispatch(RoutingActions.newCloseModalAction(taskId)),
-    createCaseAsyncAction: async (contact, workerSid: string, definitionVersion: string) => {
-      // Deliberately using dispatch rather than asyncDispatch here, because we still handle the error from where the action is dispatched.
-      // TODO: Rework error handling to be based on redux state set by the _REJECTED action
-      await asyncDispatch(dispatch)(createCaseAsyncAction(contact, workerSid, definitionVersion));
-    },
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);
+export default SearchResults;
diff --git a/plugin-hrm-form/src/components/search/index.tsx b/plugin-hrm-form/src/components/search/index.tsx
index 4c8823fe4e..5d24a621fa 100644
--- a/plugin-hrm-form/src/components/search/index.tsx
+++ b/plugin-hrm-form/src/components/search/index.tsx
@@ -180,7 +180,6 @@ const Search: React.FC<Props> = ({ task, currentIsCaller = false, saveUpdates })
             >
               <SearchResults
                 task={task}
-                currentIsCaller={currentIsCaller}
                 searchContactsResults={searchContactsResults}
                 searchCasesResults={searchCasesResults}
                 onlyDataContacts={searchParams.onlyDataContacts}
diff --git a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsCase.tsx b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsCase.tsx
index f1b867a65b..dff5d1bf4a 100644
--- a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsCase.tsx
+++ b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsCase.tsx
@@ -13,8 +13,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { recordBackendError } from '../../fullStory';
 import { completeTask } from '../../services/formSubmissionHelpers';
@@ -33,32 +33,21 @@ import { CaseStateEntry } from '../../states/case/types';
 import { selectCaseByCaseId } from '../../states/case/selectCaseStateByCaseId';
 import TabbedFormsTabs from './TabbedFormsTabs';
 
-type OwnProps = TabbedFormsCommonProps;
-
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const { metadata, savedContact } = selectContactByTaskSid(state, taskSid);
-  const caseState = selectCaseByCaseId(state, savedContact?.caseId);
-  return {
-    metadata,
-    savedContact,
-    caseState,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: OwnProps) => ({
-  finaliseContact: (contact: Contact, metadata: ContactMetadata, caseState: CaseStateEntry) =>
-    dispatch(submitContactFormAsyncAction(task as CustomITask, contact, metadata, caseState)),
-  closeModal: () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms')),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
+type Props = TabbedFormsCommonProps;
 
 const TabbedFormsCase: React.FC<Props> = props => {
-  const { task, metadata, savedContact, caseState, closeModal, finaliseContact } = props;
+  const { task } = props;
+  const dispatch = useDispatch();
+  const { metadata, savedContact } = useSelector((state: RootState) => selectContactByTaskSid(state, task.taskSid));
+  const caseState = useSelector((state: RootState) => selectCaseByCaseId(state, savedContact?.caseId));
   const strings = getTemplateStrings();
   const { newSubmitHandler } = useTabbedFormContext();
 
+  const closeModal = () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms'));
+
+  const finaliseContact = (contact: Contact, metadata: ContactMetadata, caseState: CaseStateEntry) =>
+    dispatch(submitContactFormAsyncAction(task as CustomITask, contact, metadata, caseState));
+
   const submit = async () => {
     try {
       await finaliseContact(savedContact, metadata, caseState);
@@ -92,4 +81,4 @@ const TabbedFormsCase: React.FC<Props> = props => {
 
 TabbedFormsCase.displayName = 'TabbedFormsCase';
 
-export default connector(TabbedFormsCase);
+export default TabbedFormsCase;
diff --git a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsContact.tsx b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsContact.tsx
index ae50a4a734..dd2e15990d 100644
--- a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsContact.tsx
+++ b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsContact.tsx
@@ -13,8 +13,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { callTypes, DataCallTypes } from 'hrm-types';
 
 import { RootState } from '../../states';
@@ -26,27 +26,20 @@ import ContactDetails from '../contact/ContactDetails';
 import { TabbedFormsCommonProps } from './types';
 import { changeRoute, newCloseModalAction } from '../../states/routing/actions';
 
-type OwnProps = TabbedFormsCommonProps;
+type Props = TabbedFormsCommonProps;
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const currentRoute = selectCurrentTopmostRouteForTask(state, taskSid);
-  const contactId = (currentRoute as ContactRoute)?.id;
-  return {
-    contactId,
-  };
-};
+const TabbedFormsContact: React.FC<Props> = ({ task }) => {
+  const dispatch = useDispatch();
+  const contactId = useSelector((state: RootState) => {
+    const currentRoute = selectCurrentTopmostRouteForTask(state, task.taskSid);
+    return (currentRoute as ContactRoute)?.id;
+  });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: OwnProps) => ({
-  closeModal: () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms')),
-  navigateToTab: (tab: TabbedFormSubroutes) =>
+  const closeModal = () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms'));
+  const navigateToTab = (tab: TabbedFormSubroutes) =>
     dispatch(
       changeRoute({ route: 'tabbed-forms', subroute: tab, autoFocus: false }, task.taskSid, ChangeRouteMode.Replace),
-    ),
-});
-const connector = connect(mapStateToProps, mapDispatchToProps);
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const TabbedFormsContact: React.FC<Props> = ({ task, contactId, closeModal, navigateToTab }) => {
+    );
   const handleConnectConfirmDialog = (callType: DataCallTypes) => {
     closeModal();
     if (callType === callTypes.caller) {
@@ -71,4 +64,4 @@ const TabbedFormsContact: React.FC<Props> = ({ task, contactId, closeModal, navi
 
 TabbedFormsContact.displayName = 'TabbedFormsContact';
 
-export default connector(TabbedFormsContact);
+export default TabbedFormsContact;
diff --git a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsSearch.tsx b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsSearch.tsx
index 026cf0e676..72153e51af 100644
--- a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsSearch.tsx
+++ b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsSearch.tsx
@@ -14,9 +14,10 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { callTypes } from 'hrm-types';
+import { AnyAction } from 'redux';
 
 import { RootState } from '../../states';
 import asyncDispatch from '../../states/asyncDispatch';
@@ -28,27 +29,16 @@ import { Contact } from '../../types/types';
 import Search from '../search';
 import { TabbedFormsCommonProps } from './types';
 
-type OwnProps = TabbedFormsCommonProps;
+type Props = TabbedFormsCommonProps;
 
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const { savedContact, draftContact } = selectContactByTaskSid(state, taskSid);
-  return {
-    draftContact,
-    savedContact,
-    updatedContact: getUnsavedContact(savedContact, draftContact),
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: OwnProps) => ({
-  saveDraft: (savedContact: Contact, draftContact: ContactDraftChanges) =>
-    asyncDispatch(dispatch)(updateContactInHrmAsyncAction(savedContact, draftContact, task.taskSid)),
-});
+const TabbedFormsSearch: React.FC<Props> = ({ task }) => {
+  const dispatch = useDispatch();
+  const { savedContact, draftContact } = useSelector((state: RootState) => selectContactByTaskSid(state, task.taskSid));
+  const updatedContact = getUnsavedContact(savedContact, draftContact);
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-const TabbedFormsSearch: React.FC<Props> = ({ task, draftContact, savedContact, saveDraft }) => {
+  const saveDraft = async (savedContact: Contact, draftContact: ContactDraftChanges) => {
+    await asyncDispatch<AnyAction>(dispatch)(updateContactInHrmAsyncAction(savedContact, draftContact, task.taskSid));
+  };
   return (
     <Search
       task={task}
@@ -60,4 +50,4 @@ const TabbedFormsSearch: React.FC<Props> = ({ task, draftContact, savedContact,
 
 TabbedFormsSearch.displayName = 'TabbedFormsSearch';
 
-export default connector(TabbedFormsSearch);
+export default TabbedFormsSearch;
diff --git a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsTabs.tsx b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsTabs.tsx
index ba23719ca6..b626cdec21 100644
--- a/plugin-hrm-form/src/components/tabbedForms/TabbedFormsTabs.tsx
+++ b/plugin-hrm-form/src/components/tabbedForms/TabbedFormsTabs.tsx
@@ -14,11 +14,12 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import SearchIcon from '@material-ui/icons/Search';
 import { Template } from '@twilio/flex-ui';
 import { callTypes } from 'hrm-types';
+import { AnyAction } from 'redux';
 
 import { removeOfflineContact } from '../../services/formSubmissionHelpers';
 import { RootState } from '../../states';
@@ -58,60 +59,7 @@ import '../contact/ResourceReferralList';
 import '../contact/GenerateSummaryButton';
 import '../customIntegrations/uscr/DispatchIncidentButton';
 
-type OwnProps = TabbedFormsCommonProps;
-
-const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
-  const {
-    [namespace]: { configuration, routing: routingState },
-  } = state;
-  const currentRoute = getCurrentTopmostRouteForTask(routingState, taskSid);
-  const { draftContact, savedContact } = selectContactByTaskSid(state, taskSid);
-  const contactId = savedContact.id;
-  const { showConnectedToCaseBanner, showRemovedFromCaseBanner } = selectCaseMergingBanners(state, contactId);
-  const { currentDefinitionVersion } = configuration;
-  return {
-    contactId,
-    currentDefinitionVersion,
-    currentRoute,
-    draftContact,
-    savedContact,
-    showConnectedToCaseBanner,
-    showRemovedFromCaseBanner,
-    updatedContact: getUnsavedContact(savedContact, draftContact),
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: OwnProps) => ({
-  backToCallTypeSelect: () =>
-    dispatch(changeRoute({ route: 'select-call-type' }, task.taskSid, ChangeRouteMode.Replace)),
-  clearCallType: (savedContact: Contact, otherChanges: ContactDraftChanges) =>
-    asyncDispatch(dispatch)(
-      updateContactInHrmAsyncAction(
-        savedContact,
-        { ...otherChanges, rawJson: { ...otherChanges?.rawJson, callType: '' } },
-        task.taskSid,
-      ),
-    ),
-  navigateToTab: (tab: TabbedFormSubroutes) =>
-    dispatch(
-      changeRoute({ route: 'tabbed-forms', subroute: tab, autoFocus: false }, task.taskSid, ChangeRouteMode.Replace),
-    ),
-  newCSAMReport: (contactId, csamReportType: CSAMReportType) =>
-    dispatch(newCSAMReportActionForContact(contactId, csamReportType, true)),
-  openCSAMReport: (previousRoute: AppRoutes) =>
-    dispatch(changeRoute({ route: 'csam-report', subroute: 'form', previousRoute }, task.taskSid)),
-  openSearchModal: (contextContactId: string) =>
-    dispatch(newOpenModalAction({ contextContactId, route: 'search', subroute: 'form' }, task.taskSid)),
-  removeIfOfflineContact: (contact: Contact) => removeOfflineContact(dispatch, contact),
-  saveDraft: (savedContact: Contact, draftContact: ContactDraftChanges) =>
-    asyncDispatch(dispatch)(updateContactInHrmAsyncAction(savedContact, draftContact, task.taskSid)),
-  updateDraftForm: (contactId: Contact['id'], form: Partial<ContactRawJson>) =>
-    dispatch(updateDraft(contactId, { rawJson: form })),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector>;
+type Props = TabbedFormsCommonProps;
 
 const mapTabsComponents = (errors: any) => (t: TabbedFormSubroutes | 'search') => {
   switch (t) {
@@ -152,26 +100,56 @@ const mapTabsToIndex = (contact: Contact, contactForm: Partial<ContactRawJson>):
     : ['search', 'childInformation', 'categories', 'caseInformation'];
 };
 
-const TabbedFormsTabs: React.FC<Props> = ({
-  task,
-  savedContact,
-  contactId,
-  currentDefinitionVersion,
-  currentRoute,
-  draftContact,
-  showConnectedToCaseBanner,
-  showRemovedFromCaseBanner,
-  updatedContact,
-  backToCallTypeSelect,
-  clearCallType,
-  navigateToTab,
-  newCSAMReport,
-  openCSAMReport,
-  openSearchModal,
-  removeIfOfflineContact,
-  saveDraft,
-  updateDraftForm,
-}) => {
+const TabbedFormsTabs: React.FC<Props> = ({ task }) => {
+  const dispatch = useDispatch();
+
+  const { taskSid } = task;
+  const {
+    [namespace]: { configuration, routing: routingState },
+  } = useSelector((state: RootState) => state);
+  const currentRoute = useSelector((state: RootState) => getCurrentTopmostRouteForTask(routingState, taskSid));
+  const { draftContact, savedContact } = useSelector((state: RootState) => selectContactByTaskSid(state, taskSid));
+  const contactId = savedContact.id;
+  const { showConnectedToCaseBanner, showRemovedFromCaseBanner } = useSelector((state: RootState) =>
+    selectCaseMergingBanners(state, contactId),
+  );
+  const { currentDefinitionVersion } = configuration;
+  const updatedContact = getUnsavedContact(savedContact, draftContact);
+
+  const backToCallTypeSelect = () =>
+    dispatch(changeRoute({ route: 'select-call-type' }, taskSid, ChangeRouteMode.Replace));
+
+  const clearCallType = async (savedContact: Contact, otherChanges: ContactDraftChanges) => {
+    await asyncDispatch<AnyAction>(dispatch)(
+      updateContactInHrmAsyncAction(
+        savedContact,
+        { ...otherChanges, rawJson: { ...otherChanges?.rawJson, callType: '' } },
+        taskSid,
+      ),
+    );
+  };
+
+  const navigateToTab = (tab: TabbedFormSubroutes) =>
+    dispatch(changeRoute({ route: 'tabbed-forms', subroute: tab, autoFocus: false }, taskSid, ChangeRouteMode.Replace));
+
+  const newCSAMReport = (contactId: string, csamReportType: CSAMReportType) =>
+    dispatch(newCSAMReportActionForContact(contactId, csamReportType, true));
+
+  const openCSAMReport = (previousRoute: AppRoutes) =>
+    dispatch(changeRoute({ route: 'csam-report', subroute: 'form', previousRoute }, taskSid));
+
+  const openSearchModal = (contextContactId: string) =>
+    dispatch(newOpenModalAction({ contextContactId, route: 'search', subroute: 'form' }, taskSid));
+
+  const removeIfOfflineContact = (contact: Contact) => removeOfflineContact(dispatch, contact);
+
+  const saveDraft = async (savedContact: Contact, draftContact: ContactDraftChanges) => {
+    await asyncDispatch<AnyAction>(dispatch)(updateContactInHrmAsyncAction(savedContact, draftContact, taskSid));
+  };
+
+  const updateDraftForm = (contactId: Contact['id'], form: Partial<ContactRawJson>) =>
+    dispatch(updateDraft(contactId, { rawJson: form }));
+
   const { enable_csam_report: csamReportEnabled } = getAseloFeatureFlags();
   const { contactSaveFrequency } = getHrmConfig();
   const { subroute, autoFocus } = currentRoute as TabbedFormRoute;
@@ -373,4 +351,4 @@ const TabbedFormsTabs: React.FC<Props> = ({
 
 TabbedFormsTabs.displayName = 'TabbedFormsTabs';
 
-export default connector(TabbedFormsTabs);
+export default TabbedFormsTabs;
diff --git a/plugin-hrm-form/src/states/resources/index.ts b/plugin-hrm-form/src/states/resources/index.ts
index 61664b96c7..b556fad541 100644
--- a/plugin-hrm-form/src/states/resources/index.ts
+++ b/plugin-hrm-form/src/states/resources/index.ts
@@ -156,3 +156,19 @@ export const selectResourceById = (
   }: RootState,
   resourceId: string,
 ) => resources[resourceId];
+
+export const selectResourceData = (state: RootState, resourceId: string): ReferrableResource | undefined => {
+  const resourceState = selectResourceById(state, resourceId);
+  if (!resourceState || resourceState.status === ResourceLoadStatus.Loading) {
+    return undefined;
+  }
+  return resourceState.resource;
+};
+
+export const selectResourceError = (state: RootState, resourceId: string): Error | undefined => {
+  const resourceState = selectResourceById(state, resourceId);
+  if (!resourceState || resourceState.status === ResourceLoadStatus.Loading) {
+    return undefined;
+  }
+  return resourceState.error;
+};