Ինչպես է տեղի ունենում տվյալների փոխազդեցությունը…

Ինտերակցիան իրականացվում է երեք հիմնական մեխանիզմների միջոցով՝ connect, useSelector և useDispatch:

connect (դասային կոմպոնենտների համար, բայց կարող է օգտագործվել նաև ֆունկցիոնալների հետ): Միացնում է React կոմպոնենտը Redux պահոցին: Ստանում է երկու ֆունկցիաներ՝ mapStateToProps և mapDispatchToProps:
- mapStateToProps(state, ownProps): Ստանում է պահոցից ստացված վիճակը և կոմպոնենտի props-ները, վերադարձնում է տվյալների օբյեկտ՝ վիճակից, որոնք հասանելի կլինեն props-ների միջոցով:
- mapDispatchToProps(dispatch, ownProps): Ստանում է dispatch ֆունկցիան և կոմպոնենտի props-ները, վերադարձնում է գործողությունների ֆունկցիաներ՝ որոնք հասանելի կլինեն props-ների միջոցով:
- 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);
```
useSelector (հուկ՝ ֆունկցիոնալ կոմպոնենտների համար): Позволяет извлекать данные из состояния Redux Store. Принимает функцию-селектор, которая получает текущее состояние Redux и возвращает нужный фрагмент данных:
```
// Կոդի հատված
import { useSelector } from 'react-redux';

const MyFunctionalComponent = () => {
  const count = useSelector(state => state.counter.count);

  return (
    <div>
      <p>{count}</p>
    </div>
  );
};
```

useDispatch (հուկ՝ ֆունկցիոնալ կոմպոնենտների համար): Վերադարձնում է dispatch ֆունկցիայի հղում Redux պահոցից: Օգտագործվում է գործողություններ ուղարկելու համար:

// Կոդի հատված
import { useDispatch } from 'react-redux';

const MyFunctionalComponent = () => {
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <button onClick={handleIncrement}>Increment</button>
  );
};

Վերջում, Redux-ից ստացված տվյալները (connect կամ useSelector-ի միջոցով) հասանելի են կոմպոնենտում որպես props կամ փոփոխականներ, իսկ ֆունկցիաները՝ վիճակի փոփոխության համար (connect կամ useDispatch-ի միջոցով) օգտագործվում են գործողություններ ուղարկելու համար, որոնք մշակվում են ռեդյուկտորների կողմից և թարմացնում են պահոցը։ Երբ համապատասխան մասի վիճակը փոխվում է, կապված կոմպոնենտը ավտոմատ կերպով վերաօծվում է նոր տվյալներով։

Ինչպես է տեղի ունենում տվյալների փոխազդեցությունը Redux և React կոմպոնենտի միջև?