Kaip vyksta duomenų sąveika tarp Redux ir React…

Sąveika vyksta per tris pagrindinius mechanizmus: connect, useSelector ir useDispatch.

connect (klasės komponentams, bet taip pat galima naudoti su funkcijų komponentais): Susieja React komponentą su Redux saugykla. Priima dvi funkcijas: mapStateToProps ir mapDispatchToProps.
- mapStateToProps(state, ownProps): Gaukia būseną iš saugyklos ir komponento props'us, grąžina objektą su būsenos duomenimis, kurie bus prieinami per props.
- mapDispatchToProps(dispatch, ownProps): Gaukia dispatch funkciją ir komponento props'us, grąžina objektą su veiksmų funkcijomis, kurios bus prieinamos per props.
- connect — aukštojo laipsnio funkcija, kuri apgaubia komponentą.
```
// Kodo fragmentas
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 ( hook'as funkcijų komponentams): Leidžia išgauti duomenis iš Redux būsenos. Priima selektoriaus funkciją, kuri gauna dabartinę Redux būseną kaip argumentą ir grąžina norimą duomenų fragmentą.

// Kodo fragmentas
import { useSelector } from 'react-redux';

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

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

useDispatch ( hook'as funkcijų komponentams): Grąžina nuorodą į dispatch funkciją iš Redux saugyklos. Naudojama veiksmų siuntimui.

// Kodo fragmentas
import { useDispatch } from 'react-redux';

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

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

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

Galutiniame rezultate, duomenys iš Redux (connect arba useSelector) tampa prieinami komponento kaip props arba kintamieji, o funkcijos būsenos keitimui (connect arba useDispatch) naudojamos siųsti veiksmus, kurie apdorojami reducer'iuose ir atnaujina saugyklos būseną. Kai atitinkama būsenos dalis keičiasi, susieta komponentas automatiškai perrenderinamas su naujais duomenimis.

Kaip vyksta duomenų sąveika tarp Redux ir React komponento?