В этой статье мы разберём в React redux хуки, для тех кто не знает, что это такое, рекомендую прочитать статью по ссылке.
Также для полного понимания что тут происходит, почитайте статьи которые ниже:
Установка React Redux:
Перед тем как работать с хуками в React Redux, нужно его скачать, ну и обычный react тоже, как его установить, сможете посмотреть по ссылке.
Ну а React Redux можете установить с помощью NPM:
1 | npm install react-redux |
Если вам надо что то подробнее узнать про настройку React Redux, то ссылка есть выше.
Работа с хуками React Redux:
Для примера работы с хуками в React Redux мы возьмём код из статьи «Основы React Redux», ссылка на которую вы найдёте выше.
Только мы его адаптируем для работы с хуками, вот пример этого кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import React from 'react' import { useDispatch, useSelector } from 'react-redux' import { decrement, increment } from './redux/actions' function App() { // Получаем наши числа const counter = useSelector(state => state.counter) // Получаем диспачер const dispatch = useDispatch() // Возвращаем рендер return ( <> <div> {counter} </div> <div> <button onClick={() => dispatch(increment())}> increment </button> <button onClick={() => dispatch(decrement())}> decrement </button> </div> </> ) } // Экспортируем функцию App() export default App |
Как видите в начале мы подключаем «React», хуки «react-redux» и наши actions, которые мы будем диспачить.
Внутри же App() мы сразу берём состояние наших чисел в redux, назначаем константе counter, потом берём диспачер, назначаем его переменной dispatch.
Теперь чтобы нам задиспачить действие, достаточно использовать подобную команду: dispatch({type: "ACTION"}), также вы можете передавать туда сразу функцию.
Потом выводим наше число и делаем две кнопки, и как можете заметить в качестве функции для события onClick мы используем стрелочную функцию которая делаем диспач.
Ну и в конце мы экспортируем нашу функцию App().
Давайте подведём промежуточный итог, то здесь мы использовали два React Redux хука, это useSelector(), он нужен для получения состояния redux, второй useDispatch(), возвращает функцию диспачер, благодаря которой как понятно, можно диспачить действия.
В целом эти два хука вы наверное будите использовать чаше всего, но есть ещё один, о нём чуть ниже.
На мой взгляд таким образом программа стала горазда проще, чем в прошлый раз, когда мы использовали классовые компоненты, поэтому если есть возможность, я стараюсь использовать хуки.
Другой хук:
Как говорилось выше useSelector() и useDispatch(), вы будите использовать чаще всего, но есть ещё один, это useStore(). Он нужен для того чтобы получить Store который вы передаёте в <Provider>.
Вывод:
В этой статье вы прочитали про React Redux хуки, и на мой взгляд с ними работать проще чем с классовыми компонентами.
Если вы хотите узнать про них чуть больше, то посмотрите официальную документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...