diff --git a/src/components/controls/measurementsOptions.js b/src/components/controls/measurementsOptions.js
index dee0fa21d..28f760013 100644
--- a/src/components/controls/measurementsOptions.js
+++ b/src/components/controls/measurementsOptions.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
+import { useAppDispatch } from "../../hooks";
 import { isEqual } from "lodash";
 import { changeMeasurementsCollection } from "../../actions/measurements";
 import {
@@ -30,7 +31,7 @@ const collectionOptionsSelector = (collections) => {
 };
 
 const MeasurementsOptions = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const collection = useSelector((state) => state.measurements.collectionToDisplay);
   const collectionOptions = useSelector((state) => collectionOptionsSelector(state.measurements.collections), isEqual);
   const groupBy = useSelector((state) => state.controls.measurementsGroupBy);
diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx
index 3339a07ea..023ea9bae 100644
--- a/src/components/controls/panel-toggles.tsx
+++ b/src/components/controls/panel-toggles.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
+import { useAppDispatch } from "../../hooks";
 import { useTranslation } from 'react-i18next';
 
 import Toggle from "./toggle";
@@ -7,7 +8,7 @@ import { togglePanelDisplay } from "../../actions/panelDisplay";
 import { RootState } from "../../store";
 
 export default function PanelToggles() {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
diff --git a/src/components/narrativeEditor/examineNarrative.js b/src/components/narrativeEditor/examineNarrative.js
index 25eed58c4..8ee0b7bc8 100644
--- a/src/components/narrativeEditor/examineNarrative.js
+++ b/src/components/narrativeEditor/examineNarrative.js
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from "../../hooks";
 import { getDatasetNamesFromUrl } from "../../actions/loadData";
 import { CLEAN_START } from "../../actions/types";
 import { createStateFromQueryOrJSONs } from "../../actions/recomputeReduxState";
@@ -159,7 +159,7 @@ const NarrativeSummary = ({summary, datasetResponses, showNarrative}) => {
 };
 
 const ExamineNarrative = ({narrative, datasetResponses, setDisplayNarrative}) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const el = useRef(null);
   useEffect(() => {
     /* when a narrative is loaded then we want to focus on <ExamineNarrative> however
diff --git a/src/components/narrativeEditor/useDatasetFetch.js b/src/components/narrativeEditor/useDatasetFetch.js
index 3c146f4fe..9ce53c3e2 100644
--- a/src/components/narrativeEditor/useDatasetFetch.js
+++ b/src/components/narrativeEditor/useDatasetFetch.js
@@ -1,5 +1,5 @@
 import {useEffect, useReducer, useRef} from "react";
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from "../../hooks";
 import { CACHE_JSONS } from "../../actions/types";
 import { FetchError } from "../../util/exceptions";
 
@@ -14,7 +14,7 @@ import { FetchError } from "../../util/exceptions";
  */
 
 export function useDatasetFetch(datasets) {
-  const dispatchRedux = useDispatch();
+  const dispatchRedux = useAppDispatch;
   const [datasetResponses, dispatchDatasetResponses] = useReducer(
     (state, action) => {
       if (action.reset) return {};
diff --git a/src/hooks.ts b/src/hooks.ts
new file mode 100644
index 000000000..6a8507c8a
--- /dev/null
+++ b/src/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector