Как происходит взаимодействие данных между Redux и компонентом в React?

Взаимодействие осуществляется через три основных механизма: connect, useSelector и useDispatch.

1. connect (для классовых компонентов, но также можно использовать с функциональными): Связывает React-компонент с хранилищем Redux. Принимает две функции: mapStateToProps и mapDispatchToProps.

   • mapStateToProps(state, ownProps): Получает состояние из Store и пропсы компонента, возвращает объект с данными из состояния, которые будут доступны компоненту через пропсы.
   • mapDispatchToProps(dispatch, ownProps): Получает функцию dispatch и пропсы компонента, возвращает объект с функциями-акшенами, которые будут доступны компоненту через пропсы для отправки действий в Store.
   • Возвращаемое значение connect — функция высшего порядка, которая оборачивает компонент.

   // Фрагмент кода
   import { connect } from 'react-redux';
   
   const mapStateToProps = (state) => ({
     count: state.counter.count
   });
   
   const mapDispatchToProps = (dispatch) => ({
     increment: () => dispatch({ type: 'INCREMENT' })
   });
   
   const MyComponent = ({ count, increment }) => (
     <div>
       <p>{count}</p>
       <button onClick={increment}>Increment</button>
     </div>
   );
   
   export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
   

2. useSelector (хук для функциональных компонентов): Позволяет извлекать данные из состояния Redux Store. Принимает функцию-селектор, которая получает текущее состояние Redux в качестве аргумента и возвращает желаемый фрагмент данных.

   // Фрагмент кода
   import { useSelector } from 'react-redux';
   
   const MyFunctionalComponent = () => {
     const count = useSelector(state => state.counter.count);
   
     return (
       <div>
         <p>{count}</p>
       </div>
     );
   };
   

3. useDispatch (хук для функциональных компонентов): Возвращает ссылку на функцию dispatch из Redux Store. Используется для отправки (dispatching) действий (actions) в Store.

   // Фрагмент кода
   import { useDispatch } from 'react-redux';
   
   const MyFunctionalComponent = () => {
     const dispatch = useDispatch();
   
     const handleIncrement = () => {
       dispatch({ type: 'INCREMENT' });
     };
   
     return (
       <button onClick={handleIncrement}>Increment</button>
     );
   };
   

В итоге, данные из Redux (полученные A помощью connect или useSelector) становятся доступными в компоненте как пропсы или переменные, а функции для изменения состояния (переданные через connect или useDispatch) используются для отправки действий, которые обрабатываются редьюсерами и обновляют состояние Store. При изменении соответствующей части состояния, связанный компонент автоматически перерендеривается с новыми данными.