React-də Redux və komponent arasında məlumatların…

Əlaqə üç əsas mexanizm vasitəsilə həyata keçirilir: connect, useSelector və useDispatch.

connect (sinif komponentləri üçün, lakin funksional komponentlərlə də istifadə oluna bilər): React komponentini Redux anbarına bağlayır. İki funksiya qəbul edir: mapStateToProps və mapDispatchToProps.
- mapStateToProps(state, ownProps): Anbarın vəziyyətini və komponentin propslarını alır, vəziyyət məlumatlarından ibarət obyekt qaytarır və bu məlumatlar propslar vasitəsilə komponentdə əlçatan olur.
- mapDispatchToProps(dispatch, ownProps): dispatch funksiyasını və komponentin propslarını alır, anbara göndəriləcək hərəkət funksiyalarını ehtiva edən obyekt qaytarır.
- connect-dən qaytarılan dəyər, komponenti əhatə edən yüksək səviyyəli funksiyadır.
```
// Kod parçası
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}>Artır</button>
  </div>
);

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
```

useSelector (funksional komponentlər üçün hook): Redux Store-dan məlumatların çıxarılmasına imkan verir. Cari Redux vəziyyətini arqument kimi alan və istənilən məlumat parçasını qaytaran seçici funksiyanı qəbul edir.

// Kod parçası
import { useSelector } from 'react-redux';

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

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

useDispatch (funksional komponentlər üçün hook): Redux Store-dan dispatch funksiyasına istinad qaytarır. Hərəkətləri (actions) göndərmək üçün istifadə olunur.

// Kod parçası
import { useDispatch } from 'react-redux';

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

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

  return (
    <button onClick={handleIncrement}>Artır</button>
  );
};

Nəticədə, Redux-dan alınan məlumatlar (connect və ya useSelector vasitəsilə) komponentdə props və ya dəyişən kimi əlçatan olur, və vəziyyəti dəyişdirmək üçün funksiyalar (connect və ya useDispatch vasitəsilə) göndərilir və reducerlar tərəfindən işlənir və Store-un vəziyyəti yenilənir. Müvafiq vəziyyət hissəsi dəyişdikdə, əlaqəli komponent avtomatik olaraq yeni məlumatlarla yenidən render olunur.

React-də Redux və komponent arasında məlumatların qarşılıqlı əlaqəsi necə baş verir?