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

Я пытаюсь заставить горячую перезагрузку работать с реакцией 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'] также приводит к тому, что горячая перезагрузка не работает; что странно, потому что это должно быть эквивалентно [].

reactjs redux react-redux react-hooks hot-reload
person Attila Szeremi    schedule 14.10.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

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

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

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

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

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

person Attila Szeremi    schedule 14.10.2019