Redux va React komponenti o'rtasida ma'lumotlar…

Interaksiya uchta uchta asosiy mexanizmlar orqali amalga oshiriladi: connect, useSelector va useDispatch.

connect (sinf komponentlari uchun, ammo funksional komponentlar bilan ham ishlatilishi mumkin): React komponentini Redux do'koniga bog'laydi. Ikki funktsiya qabul qiladi: mapStateToProps va mapDispatchToProps.
- mapStateToProps(state, ownProps): Do'kon holatini va komponentning propslarini oladi, holat ma'lumotlarini o'z ichiga olgan ob'ektni qaytaradi, bu ma'lumotlar propslar orqali komponentda mavjud bo'ladi.
- mapDispatchToProps(dispatch, ownProps): dispatch funktsiyasini va komponent propslarini oladi, propslar orqali komponentga mavjud bo'ladigan harakat funktsiyalarini o'z ichiga olgan ob'ektni qaytaradi.
- connect ning qaytargan qiymati, komponentni o'z ichiga olgan yuqori darajali funktsiya.
```
// Kod parcha
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}>O'stirish</button>
  </div>
);

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

useSelector (funksional komponentlar uchun hook): Redux Store holatidan ma'lumotlarni chiqarishga imkon beradi. Hozirgi Redux holatini argument sifatida oladigan va istalgan ma'lumot bo'lagini qaytaradigan selektor funktsiyasini qabul qiladi.

// Kod parcha
import { useSelector } from 'react-redux';

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

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

useDispatch (funksional komponentlar uchun hook): Redux Store dan dispatch funktsiyasiga havola qaytaradi. Harakatlarni yuborish uchun ishlatiladi.

// Kod parcha
import { useDispatch } from 'react-redux';

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

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

  return (
    <button onClick={handleIncrement}>O'stirish</button>
  );
};

Xulosa qilib aytganda, Redux dan olingan ma'lumotlar (connect yoki useSelector yordamida) komponentda props yoki o'zgaruvchilar sifatida mavjud bo'ladi, va holatni o'zgartirish uchun funksiyalar (connect yoki useDispatch orqali) harakatlarni yuborish uchun ishlatiladi, bu harakatlar reducerlar tomonidan ishlanadi va Store holatini yangilaydi. Muvofiq holat qismi o'zgarganda, bog'langan komponent avtomatik ravishda yangi ma'lumotlar bilan qayta render qilinadi.

Redux va React komponenti o'rtasida ma'lumotlar qanday o'zaro ta'sir qiladi?