Горячая перезагрузка не работает должным образом с React-Redux и Hooks - PullRequest
Новая
       20

Горячая перезагрузка не работает должным образом с React-Redux и Hooks

0 голосов
/ 14 октября 2019

Я пытаюсь получить горячую перезагрузку для работы с реагировать 16.9.0 и реагировать-редуксом 7.1.1.

Это мой код, где я хочу загрузку данных (обратный вызов в useEffect())вызывается только один раз: 

function Sidebar() {
  const dispatch = useCallback(useDispatch(), []);
  useEffect(() => {
    console.info('useEffect');
    dispatch(loadFields());
  }, [dispatch]);

  ...
}

Несмотря на использование useCallback() для запоминания функции, когда я сохраняю изменение в другом файле JS, обратный вызов в useEffect() вызывается снова, перезагружая поля.

Если я изменил зависимость функции useEffect() с [dispatch] на [], то она работает так, как я хочу, и обратный вызов в useEffect() не вызывает , а не вызываетсяна горячую перезагрузку. Но если я сделаю это, рекомендованный React Eslint будет жаловаться, что я не включил зависимость dispatch.

Как сделать линтер счастливым, при этом горячая перезагрузка для правильной работы с useDispatch()?

Другие симптомы:

  • Использование статического ['anything'] также приводит к горячей перезагрузке не работает;что странно, потому что оно должно быть эквивалентно [].

1 Ответ

0 голосов
/ 14 октября 2019

Оказывается, у меня было неправильное представление о крючках с горячей перезагрузкой.

https://github.com/gaearon/react-hot-loader/tree/v4.12.15#hook-support

Именно для какой-то useEffect() и была обусловлена ​​какая-то зависимость1008 * успешных горячих перезагрузок, потому что на самом деле перезапускает ловушки, что делает горячую перезагрузку успешной, а не запускает их.

Это позволяет вам вносить изменения внутри useEffect() и применять эти изменения путем повторного запуска. только ваш крючок без обновления всей страницы. Пока вы не используете [] в качестве зависимостей хуков. Конечно, побочный эффект заключается в том, что если вы не внесете изменения в useEffect(), он будет все еще перезапустить его, что несколько неудобно.

Поэтому, если я хочу, чтобы хук не перезапускался при любом изменении кода в проекте, мне нужно сделать зависимости хуков [].

Но как компромисс, хук выиграл 'перезапустить, даже если я сделаю изменение кода внутри этого кода;и, конечно, другой компромисс в том, что оно делает правило react-hooks/exhaustive-deps eslint несчастным.

...