React'ta Redux ve bileşen arasında veri etkileşimi…

İletişim, üç temel mekanizma aracılığıyla gerçekleştirilir: connect, useSelector ve useDispatch.

connect (sınıf bileşenleri için, ancak fonksiyonel bileşenlerle de kullanılabilir): Bir React bileşenini Redux deposuna bağlar. İki fonksiyon alır: mapStateToProps ve mapDispatchToProps.
- mapStateToProps(state, ownProps): Store'dan durumu ve bileşenin propslarını alır, duruma ait verileri içeren bir nesne döner; bu veriler propslar aracılığıyla bileşende erişilebilir olur.
- mapDispatchToProps(dispatch, ownProps): dispatch fonksiyonunu ve bileşenin propslarını alır, eylem fonksiyonlarını içeren bir nesne döner; bu fonksiyonlar propslar aracılığıyla bileşende erişilebilir ve Store'a eylem göndermek için kullanılır.
- connect'in döndürdüğü değer, bileşeni saran yüksek düzen fonksiyonudur.
```
// 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 (fonksiyonel bileşenler için hook): Redux Store'daki verileri çıkarmaya olanak tanır. Mevcut Redux durumunu argüman olarak alan ve istenen veri parçasını döndüren bir seçici fonksiyon alır.

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

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

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

useDispatch (fonksiyonel bileşenler için hook): Redux Store'daki dispatch fonksiyonuna referans döner. Eylemleri göndermek için kullanılır.

// 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>
  );
};

Özetle, Redux'tan alınan veriler (connect veya useSelector ile) bileşende props veya değişkenler olarak erişilebilir hale gelir, ve durumu değiştiren fonksiyonlar (connect veya useDispatch aracılığıyla) eylem göndermek için kullanılır, bu eylemler reducerlar tarafından işlenir ve Store'un durumu güncellenir. İlgili durum parçası değiştiğinde, bağlı bileşen otomatik olarak yeni verilerle yeniden render edilir.

React'ta Redux ve bileşen arasında veri etkileşimi nasıl gerçekleşir?