Redux жана React компоненттери арасындагы…

Интеракция үч негизги механизм аркылуу жүргүзүлөт: connect, useSelector жана useDispatch.

connect (класс компоненттер үчүн, бирок функционалдык компоненттер менен да колдонулушу мүмкүн): React компонентин Redux сактагыч менен байланыштырат. Ичине эки функция алат: mapStateToProps жана mapDispatchToProps.
- mapStateToProps(state, ownProps): Сактагычтан абалды алат жана компоненттин пропсаларын, абалдан алынган маалыматтарды кайтарат, алар пропс аркылуу жеткиликтүү болот.
- mapDispatchToProps(dispatch, ownProps): dispatch функциясын жана компоненттин пропсаларын алат, жана аракеттердин функцияларын кайтарат, алар пропс аркылуу жеткиликтүү болот.
- 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 сактагычындагы маалыматтарды чыгарып алууга мүмкүндүк берет. Текшерүүчү функцияны кабыл алат, ал учурдагы Redux абалын аргумент катары алып, каалаган бөлүгүн кайтарат.
```
// Код фрагменти
import { useSelector } from 'react-redux';

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

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

useDispatch (функционалдык компоненттер үчүн хук): Redux сактагычынан dispatch функциясына шилтемени кайтарат. Анын жардамында аракеттерди жөнөтүүгө болот.

// Код фрагменти
import { useDispatch } from 'react-redux';

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

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

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

Жыйынтыкта, Reduxтен алынган маалыматтар (connect же useSelector аркылуу) компонентте пропс же өзгөрмө катары жеткиликтүү болот, ал эми өзгөртүү функциялары (connect же useDispatch аркылуу) аракеттерди жөнөтүү үчүн колдонулат, алар редукторлор тарабынан иштетилип, сактагычты жаңыртат. Тиешелүү бөлүк өзгөргөндө, байланышкан компонент автоматтык түрдө жаңы маалыматтар менен кайра иштелип чыгат.

Redux жана React компоненттери арасындагы маалыматтардын өз ара аракеттешүүсү кандай өтөт?