Как подключить React-компонент к Redux-store?

Question

Чтобы подключить компонент к Redux-store, используется библиотека React Redux. Для получения данных из состояния применяется хук useSelector, а для отправки действий — useDispatch. Эти инструменты позволяют интегрировать Redux-логику в React-компоненты без необходимости дополнительной настройки.

YeaHub · Accepted Answer

Связывание React-компонента с Redux-store осуществляется через библиотеку React Redux, которая предоставляет хуки useSelector и useDispatch.Шаги для подключения:Убедитесь, что хранилище Redux передано в приложение через компонент :import { Provider } from 'react-redux'; import { store } from './store'; const App = () => ( );Используйте useSelector для доступа к состоянию:import { useSelector } from 'react-redux'; const YourComponent = () => { const todos = useSelector((state) => state.todos); return (

{todo.text}

); };Используйте useDispatch для отправки действий:import { useDispatch } from 'react-redux'; const YourComponent = () => { const dispatch = useDispatch(); const addTodo = () => { dispatch({ type: 'ADD_TODO', payload: { text: 'New Task' } }); }; return ; };Ключевые аспекты:useSelector: Позволяет "подписаться" на изменения в состоянии Redux и получить его данные.useDispatch: Предоставляет функцию для отправки действий, чтобы изменить состояние.Альтернативный подход — connect (классический API): В более старых версиях React Redux использовалась функция connect:import { connect } from 'react-redux'; const mapStateToProps = (state) => ({ todos: state.todos, }); const mapDispatchToProps = (dispatch) => ({ addTodo: () => dispatch({ type: 'ADD_TODO', payload: { text: 'New Task' } }), }); const YourComponent = ({ todos, addTodo }) => (

{todo.text}

); export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);useSelector и useDispatch — это более современный и удобный способ работы с Redux в функциональных компонентах.