Обновление с устаревших компонентов React

В этой статье я постараюсь объяснить, как можно использовать Redux с React Hooks.

React Redux предоставил поддержку хуков в версии 7.1, выпущенной 11 июня 2019 года. Это означает, что вы можете использовать Redux с хуками в своем функциональном компоненте вместо использования connect компонентов более высокого порядка (HOC).

Что такое крючки?

Чтобы немного освежить в памяти хуки, хуки были представлены в React версии 16.8, и они позволяют вам получить доступ к методам состояния и жизненного цикла в функциональных компонентах.

Давайте посмотрим на пример.

Компонент класса React, подобный этому:

Может быть записан как функциональный компонент с помощью таких хуков:

Если вы хотите больше узнать о хуках, я бы посоветовал вам просмотреть подробную документацию по хукам.

Вернемся к делу

Первоначальная цель этой статьи - объяснить, как мы можем использовать Redux с хуками.

React Redux теперь предлагает useSelector и useDispatch хуки, которые можно использовать вместо connect.

useSelector является альтернативой mapStateToProps connect. Вы передаете ему функцию, которая принимает состояние хранилища Redux и возвращает необходимое состояние.

useDispatch заменяет mapDispatchToProps connect. Все, что он делает, - это возвращает dispatch метод вашего магазина, чтобы вы могли вручную отправлять действия.

Достаточно теории? Хорошо, давайте посмотрим на пример в реальном времени, в котором мы преобразуем компонент React, использующий connect, в компонент, использующий хуки.

Использование connect:

Теперь с новыми хуками React Redux вместо connect:

Как видите, код точен, а меньшее количество строк означает лучшую производительность, его легче читать, легче понимать и, конечно же, легче тестировать.

Еще одно преимущество отказа от использования компонента более высокого порядка заключается в том, что вы больше не получаете эту «виртуальную цепочку DOM»:

Теперь у вас есть основы хуков и то, как их использовать с Redux, пора заняться подробной документацией.

Вы узнали что-то новое сегодня? Комментарии и отзывы всегда радуют писателя!