Можно ли хуки вынести в отдельную функцию. И если нет, то как быть?
И пытаюсь вызвать ее из pushForm()
это против правил, хуки должны жить на верхнем уровне в компонентах или же других(кастомных) хуках.

В вашем случае, как один из вариантов, логику обработки формы можно вынести в кастомный хук. Затем использовать его в LoginUser.
Приблизительная структура:
// Custom hook
export const useAuthHandler = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    if (token) { // чтобы не диспатчить с начальным null на первом рендере
      // диспатчим экшн с полученным токеном
    }
  }, [token]); // будет следить за token

  return () => { // возвращаем функцию-обработчик
    // запрашиваем токен, в then вызываем setToken(token)
  };
};

// Component
export default function LoginUser() {
  const handleSubmit = useAuthHandler();

  return (
    <div>
      <form id="auth_form">
        {/* ... */}
        <Button autofocus="true" onClick={handleSubmit}>Авторизоваться</Button>
      </form>
    </div>
  );
};
IDE все правильно говорит.
Вообще самое простое что можно использовать для асинхронщины в редакс - https://github.com/reduxjs/redux-thunk

https://codesandbox.io/s/late-violet-m53z4?file=/s...