Use typed dispatch

Recommended in migration guide¹.

¹ https://redux.js.org/usage/migrating-to-modern-redux#migrating-typescript-for-components

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);

src/components/controls/panel-toggles.tsx

@@ -1,13 +1,14 @@
 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";
 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);

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

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 {};

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