Можно ли хуки вынести в отдельную функцию. И если нет, то как быть?

Question

[Сергей Чазов]

у меня есть экспортируемая функция, которая рисует форму

export default function LoginUser() {
return (
        <div>
            <form id="auth_form">
                <div className="form-group">
                    <label htmlFor="Email">Email</label>
                    <input type="text" className="form-control" id="email" placeholder="Email"/>
                </div>
                <Button autofocus="true" onClick={() => pushForm()}>Авторизоваться</Button>
            </form>
        </div>
    );
}

Я хочу, чтобы по нажатию на pushFrom происходил запрос к серверу, получался ответ и обновлялся стейт (который работает на Redux).

я вынес pushForm() в отдельную функцию. Она делает запрос к серверу и возвращает token (код урезаю, чтобы только суть осталась)

function pushForm() {
const service = new AuthService;
    service.authorizeUserAction(body).then(
        ({token}) => {
            return token;
        }
    )
}

И теперь мне нужно его задиспатчить в стейт
Я создал еще одну функцию

function dispatchUserInfo( token){
const userListSelector = useSelector(state => state.userList, shallowEqual);
    const dispatch            = useDispatch();
    useEffect(
        () => {
            dispatch(userTokenAction(token));
        },[]
    );
}

И пытаюсь вызвать ее из pushForm(). IDE мне на это говорит, что я ничего не возвращаю, поэтому хуки использовать нельзя https://w6p.ru/NzRlZjA.jpg А мне возвращать нечего..
Я думаю, что я неправильно использую хуки (типо надо перенести хуки в основную фукнцию LoginUser()). Но как тогда построить правильно такой код? Помогите, пожалуйста.

Comments

[hzzzzl]

а что это за IDE или плагин с такими подсказками?

[Pavel Shvedov]

hzzzzl, что-то из jetbrains, видимо вебшторм

[Сергей Чазов]

hzzzzl, я использую phpStorm. он из коробки дает такие подсказки. плагины не нужны

Answer 1

[paoluccio]

И пытаюсь вызвать ее из 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>
  );
};

Answer 2

[Владимир]

IDE все правильно говорит.
Вообще самое простое что можно использовать для асинхронщины в редакс - https://github.com/reduxjs/redux-thunk

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

Comments

[Сергей Чазов]

Спасибо за ответ! А можете подсказать какой-то пример, в котором бы при использовании redux, hooks и функциональных компонентов решался бы функционал: нажали на кнопку -> отправили запрос на сервер -> записали ответ в state

[Владимир]

В примерах thunk нету ?
Может чуть позже накидаю пример

[Владимир]

Тут запрашиваются данные на didComponentMount, но вместо useEffect можно сделать просто хендлер для кнопки
https://codesandbox.io/s/late-violet-m53z4?file=/s...