React имеет много функций, которые постоянно обновляются или создаются время от времени. Это библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов, и вы можете понять, почему она так популярна. Я даже использую ее ежедневно в своих проектах, и когда я думаю, что я понял все, что касается React, я быстро обнаруживаю, что мне еще многому нужно научиться. Что приводит меня к React Hooks.
React Hooks был представлен еще в 2018 году на конференции React. Как способ использовать состояние и другие эффекты без необходимости определять класс JavaScript. Это действительно способ воспользоваться преимуществом наличия более чистого, простого и понятного компонента. Который, в свою очередь, также легче читать.
Есть два хука, на которые я хочу обратить ваше внимание, оба — «useSelector» и «useDispatch». Теперь, если вы знакомы с React Redux, redux — это контейнер состояний для приложений. Он позволяет вам получать или манипулировать состоянием из любой точки вашего кода без необходимости просачиваться вниз по свойствам через несколько уровней компонентов и их потомков. Redux сам по себе спасает жизнь, по крайней мере, для меня, когда я узнал о нем.
Теперь с redux, чтобы вы могли захватывать состояние и манипулировать им в любом компоненте, вам нужно настроить «Store», сделав состояние глобальным, и настроить «Connect», чтобы подключить компонент React к хранилищу. С connect вам нужно настроить его так…
Начните с импорта «connect» из «react-redux» в файле компонентов. Как вы видите, «connect» имеет два параметра. «MapStateToProps» и «MapDispatchToProps». MapStateToProps нужны для получения состояния, когда это необходимо. «MapDispatchToProps» нужны, когда состоянием нужно манипулировать в зависимости от того, что требует действие пользователя. Если один нужен, а другой нет, то вы оставляете этот ненужный параметр «null». Оба требуют определения разных свойств, которые можно вызывать и использовать внутри компонента.
Возвращаясь к хукам «useSelector» и «useDispatch» во время моего дальнейшего изучения приложений React, я наткнулся на эти два драгоценных камня. Чтобы настроить его, вам нужно импортировать {useSelector, useDispatch} из «react-redux». Для этого примера я сделал простой счетчик. Здесь мы можем получать состояние и управлять им здесь на одном экране. Вы нажимаете «Increment», и он добавляет 1. «Decrement» вычитает 1 визуально.
Теперь с помощью «useSelector» в одной строке кода вы можете получить состояние, функцию обратного вызова, которая возвращает указанное состояние. В этом случае она называется «counter». Это позволяет нам получить состояние и использовать его в этом примере для отображения текущего счетчика. Что касается «useDispatch», это позволяет нам «отправить» определенное действие нашему редуктору. В настоящее время у нас есть два типа действий: «INCREMENT» и «DECREMENT». При нажатии кнопки она отправляет отправку с одним из двух действий. «onClick» получает функцию обратного вызова, названную в честь нашей объявленной переменной «dispatch» с «type» и действием, которое вы хотите, чтобы она выполнила, как показано ниже.
Как вы можете видеть, количество строк кода чище по сравнению с использованием «connect» и, желательно, более читабельно, скажем, для того, кто впервые просматривает ваш код. Когда я впервые услышал о React Hooks, я немного нервничал и подумал: «Отлично... Я этого не знаю!», но после небольшого исследования и практики я понял, почему они играют важную роль в React. Для меня гораздо проще и, по-моему, круто то, что придумало сообщество React, чтобы сделать программирование немного удобнее. Попробуйте!! Ниже приведен список источников, которые я нашел ценными для своего исследования.