diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts index 1b0545e83..9cfd0a5e1 100644 --- a/app/soapbox/hooks/index.ts +++ b/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'; diff --git a/app/soapbox/hooks/useApi.ts b/app/soapbox/hooks/useApi.ts index 1d98a6166..2e22df997 100644 --- a/app/soapbox/hooks/useApi.ts +++ b/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); }; diff --git a/app/soapbox/hooks/useGetState.ts b/app/soapbox/hooks/useGetState.ts new file mode 100644 index 000000000..848c0c348 --- /dev/null +++ b/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 }; \ No newline at end of file