/
aprogrammer
/
react-redux-basic
Обзор
Документация
Войти
/
aprogrammer
/
react-redux-basic
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components/counter.tsx
20 строк
2 KB
aprogrammer
Adding demo app
14 янв 2025, 01:11
14 янв 2025, 01:11
2bb786c
Код
Авторство
О чём код?
import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; // Импортируем хуки useSelector и useDispatch из библиотеки react-redux. Хук - это функция, которая позволяет вам использовать состояние и другие возможности React без написания классов import { RootState } from '../store/store'; // Импортируем тип RootState из хранилища import { increment, decrement, incrementByAmount } from '../store/counterSlice'; // Импортируем действия increment, decrement и incrementByAmount из слайса const Counter: React.FC = () => { const count = useSelector((state: RootState) => state.counter.value); // Получаем значение счетчика из хранилища, хук useSelector позволяет получить доступ к состоянию хранилища и выбрать из него нужные данные const dispatch = useDispatch(); // Хук useDispatch позволяет получить доступ к функции dispatch, которая отправляет действия в хранилище return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Увеличить</button> <button onClick={() => dispatch(decrement())}>Уменьшить</button> <button onClick={() => dispatch(incrementByAmount(5))}>Увеличить на 5</button> </div> ); }; export default Counter;