Примечание. Время чтения для этого поста составляет приблизительно 15 минут. Этот пост предполагает, что вы знакомы с React Concepts, такими как компоненты функции и класса, HOC, крючки и т. Д., А также с использованием Redux Store для управления состоянием в React. Если вы хотите изучить или обновить эти концепции, перейдите по ссылкам ниже.
- https://reactjs.org/docs/components-and-props.html
- https://reactjs.org/docs/hooks-intro.html
- https://reactjs.org/docs/higher-order-components.html
Введение
Реагировать введено Крючки Для абстрагирования логики состояния между компонентами, и она изменила способ писать код в React. Теперь мы могли бы использовать состояние, жизненные циклы и практически любую другую функцию React внутри функциональных компонентов, которые сделали вещи намного проще и кодировали намного чище. Как мы знаем, Компонент высшего порядка (HOC) сыграл главную роль в повторном использовании логики Stateful до введения крючков. HOC немного утомительны и делают код более сложным. Следовательно, с тех пор фокус сместился на крючки.
Самый популярный пример HOC, о котором я могу подумать, – это Connect () Hoc от Redux. Это помогает нам подключить наш компонент к магазину Redux в React. Нам нужно обернуть компонент, который должен получить доступ к магазину в hoc connect (). Кроме того, мы можем передать два параметра:
- MapStateToProps – Полезно для подписки на значения из магазина, извлекая их в качестве реквизита.
- mapdispatchtoprops – Он связывает создателей действий для отправки и автоматически отправляет действия при вызванном.
Redux Hooks
Используя схему крючков, Redux официально выпустил Redux Hooks В качестве альтернативы обертывающим компонентам в hoc connect () для подписания на магазин. Redux Hooks доступны от React-Redux версия 7.1.0 Анкет
В последнее время было много обсуждений о том, устраняют ли React Hooks необходимость использования Redux. Это обсуждение в основном возникает потому, что немного сложно соединить компоненты React в магазин Redux с использованием HOC (по крайней мере, это то, что многие из нас чувствуют). Redux Hooks превращают это сравнение (управление государством с или без Redux) яблоки с яблоками.
Чтобы понять, как Redux Hooks устраняет необходимость connect () hoc, давайте быстро посмотрим на пример, который использует hoc connect () для подписки на магазин Redux:
Здесь у нас есть компонент под названием Недавний факт что в соответствии с его описанием отображает недавние игры, сыгранные конкретным пользователем.
- Компонент недавнегоактивности обернут внутри Connect () Hoc
- mapdispatchtoprops Внедряет действие «LoadActivity»
- Действие ‘ LoadActivity ‘отправляется из жизненного цикла ComponentDidMount (), чтобы получить и сохранить недавнюю деятельность пользователя в магазине Redux
- MapStateToProps подписывается на деятельность и имя пользователя из магазина
- деятельность Опора затем используется для отображения недавних игр, сыгранных пользователем
Теперь давайте посмотрим, как Redux Hooks помогает нам сделать тот же код проще и чище. Есть три крючка Redux, которые нам нужно понять:
- использовал iSpatch () – Он возвращает ссылку на функцию диспетчерской из хранилища Redux, которая затем может использоваться для отправки действий в компоненте, когда это необходимо.
- использует elector () – Он используется для подписки на требуемые данные из хранилища Redux, используя функцию селектора. Функция селектора здесь принимает хранилище в качестве единственного аргумента и извлекает необходимые данные в качестве реквизита. Селектор будет вызывать всякий раз, когда компонент будет отображаться, а также всякий раз, когда какое -либо действие будет отправлено. Когда действие отправлено, userselector () проведет справочное сравнение значения результата предыдущего селектора и текущего значения результата. Если они разные, компонент будет вынужден повторно рендеринг.
- Usestore () – Он возвращает магазин Redux, который мы создали ранее, и передавались в компоненте <провайдера>.
Достаточно с теорией, давайте погрузимся прямо в код:
Теперь мы избавились от hoc connect () вместе с MapStateToprops и MapDispatchToprops. Этот код уже выглядит намного проще и чище. Посмотрите, как легко подписаться на магазин и отправлять действия, используя эти крючки.
Использует elector () концептуально похож на MapStateToProps . Мы подписываемся на данные «Activity» и «Имя» из магазина, используя этот крючок.
ИСПОЛЬЗУЕТСЯ ИСПОЛНИТЕЛЬНО Помогает избавиться от mapdispatchtoprops Анкет В приведенном выше примере мы изначально создаем объект диспетчеры, а затем используем его для отправки действий по всему компоненту.
Есть также usESTATE () крючок, который не очень часто используется. Использование Selector () является предпочтительным способом подписки на данные из магазина. Однако это может быть полезно для менее распространенных сценариев, которые требуют доступа к магазину.
Чтобы узнать и узнать больше о Redux Hooks, вы можете найти эти ссылки полезными:
- https://react-redux.js.org/next/api/hooks (Официальные документы)
- https://levelup.gitconnected.com/react-redux-hooks-useselector-and-usedispatch-f7d8c7f75cdd
- https://itnext.io/how-existing-redux-patterns-compare-to-the-new-redux-hooks-b56134c650d2
- https://blog.bitsrc.io/using-react-redux-hooks-97654aff01e
Оригинал: “https://dev.to/pathakpratik/how-to-elegantly-connect-to-the-store-using-redux-hooks-3o55”