Add useGetState hook

app/soapbox/hooks/index.ts

@@ -5,6 +5,7 @@ export { useAppSelector } from './useAppSelector';
 export { useClickOutside } from './useClickOutside';
 export { useCompose } from './useCompose';
 export { useDebounce } from './useDebounce';
+export { useGetState } from './useGetState';
 export { useGroup, useGroups } from './useGroups';
 export { useGroupsPath } from './useGroupsPath';
 export { useDimensions } from './useDimensions';

app/soapbox/hooks/useApi.ts

@@ -1,12 +1,9 @@
 import api from 'soapbox/api';
 
-import { useAppDispatch } from './useAppDispatch';
+import { useGetState } from './useGetState';
 
 /** Use stateful Axios client with auth from Redux. */
 export const useApi = () => {
-  const dispatch = useAppDispatch();
-
-  return dispatch((_dispatch, getState) => {
-    return api(getState);
-  });
+  const getState = useGetState();
+  return api(getState);
 };

app/soapbox/hooks/useGetState.ts

@@ -0,0 +1,14 @@
+import { useAppDispatch } from './useAppDispatch';
+
+import type { RootState } from 'soapbox/store';
+
+/**
+ * Provides a `getState()` function to hooks.
+ * You should prefer `useAppSelector` when possible.
+ */
+function useGetState() {
+  const dispatch = useAppDispatch();
+  return () => dispatch((_, getState: () => RootState) => getState());
+}
+
+export { useGetState };