Update Redux store types

Author: markerikson

src/ui/actions/index.ts

@@ -1,4 +1,4 @@
-import { Action, AnyAction, Store, ThunkAction } from "@reduxjs/toolkit";
+import { Action, Store, ThunkAction, UnknownAction } from "@reduxjs/toolkit";
 
 import debuggerActions from "devtools/client/debugger/src/actions";
 import { QuickOpenActions } from "devtools/client/debugger/src/actions/quick-open";
@@ -21,7 +21,7 @@ export type UIThunkAction<TReturn = void> = ThunkAction<
   TReturn,
   UIState,
   ThunkExtraArgs,
-  AnyAction
+  UnknownAction
 >;
 
 export type UIStore = AppStore;

src/ui/components/SourcesContextAdapter.tsx

@@ -33,7 +33,7 @@ export default function SourcesContextWrapper({ children }: PropsWithChildren) {
     (location: PartialLocation | null) => {
       if (location === null) {
         if (selectedLocation !== null) {
-          dispatch(clearSelectedLocation);
+          dispatch(clearSelectedLocation());
         }
       } else {
         if (

src/ui/setup/hooks.ts

@@ -1,13 +1,13 @@
 // We ban use of `useDispatch/useSelector` in the codebase in favor of the typed hooks,
 // but this is the one file that needs them
 // eslint-disable-next-line no-restricted-imports
-import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from "react-redux";
+import { useDispatch, useSelector, useStore } from "react-redux";
 
 import type { UIState } from "ui/state";
 
 import type { AppDispatch, AppStore } from "./store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppStore = useStore as () => AppStore;
-export const useAppDispatch: () => AppDispatch = useDispatch;
-export const useAppSelector: TypedUseSelectorHook<UIState> = useSelector;
+export const useAppStore = useStore.withTypes<AppStore>();
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<UIState>();

src/ui/setup/index.ts

@@ -35,9 +35,7 @@ declare global {
   }
 }
 
-// Just to grab the type of Dispatch
-let store: UIStore;
-export type AppDispatch = typeof store.dispatch;
+export type { AppDispatch } from "./store";
 
 const getDefaultSelectedPrimaryPanel = (
   session: ReplaySession | undefined,

src/ui/setup/store.ts

@@ -3,6 +3,7 @@ import {
   Reducer,
   Store,
   ThunkDispatch,
+  UnknownAction,
   combineReducers,
   configureStore,
 } from "@reduxjs/toolkit";
@@ -105,9 +106,12 @@ export function bootstrapStore(initialState: Partial<UIState>) {
   return store;
 }
 
-export type AppStore = ReturnType<typeof bootstrapStore>;
-// TODO Actually duplicated this with ./index.ts
-export type AppDispatch = AppStore["dispatch"];
+type BaseAppStore = ReturnType<typeof bootstrapStore>;
+// Explicitly include ThunkDispatch since the @ts-ignore on middleware
+// prevents TS from inferring it from the store's dispatch type.
+export type AppDispatch = ThunkDispatch<UIState, ThunkExtraArgs, UnknownAction> &
+  BaseAppStore["dispatch"];
+export type AppStore = Omit<BaseAppStore, "dispatch"> & { dispatch: AppDispatch };
 
 export function extendStore(
   store: Store,