Ako prebieha interakcia údajov medzi Redux a…

Interakcia sa vykonáva prostredníctvom troch hlavných mechanizmov: connect, useSelector a useDispatch.

connect (pre triedové komponenty, ale môže sa použiť aj s funkčnými): Spája React komponentu s úložiskom Redux. Prijíma dve funkcie: mapStateToProps a mapDispatchToProps.
- mapStateToProps(state, ownProps): Získa stav z obchodu a props komponenty, vracia objekt s údajmi zo stavu, ktoré budú dostupné cez props.
- mapDispatchToProps(dispatch, ownProps): Získa funkciu dispatch a props komponenty, vracia objekt s funkciami-akciami, ktoré budú dostupné cez props na odosielanie akcií do obchodu.
- Návratová hodnota connect — funkcia vyššieho radu, ktorá obaluje komponentu.
```
// Fragment kódu
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 pre funkčné komponenty): Umožňuje extrahovať údaje zo stavu Redux Store. Prijíma funkciu-selektor, ktorá získava aktuálny stav Redux ako argument a vracia požadovaný fragment dát.

// Fragment kódu
import { useSelector } from 'react-redux';

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

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

useDispatch (hook pre funkčné komponenty): Vráti odkaz na funkciu dispatch z Redux Store. Používa sa na odosielanie (dispatching) akcií do obchodu.

// Fragment kódu
import { useDispatch } from 'react-redux';

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

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

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

Na záver, údaje z Redux (získané pomocou connect alebo useSelector) sa stávajú dostupnými v komponentách ako props alebo premenné, a funkcie na zmenu stavu (prenesené cez connect alebo useDispatch) sa používajú na odosielanie akcií, ktoré spracúvajú reducery a aktualizujú stav obchodu. Pri zmene príslušnej časti stavu sa automaticky znovu vykreslí prepojená komponenta s novými údajmi.

Ako prebieha interakcia údajov medzi Redux a komponentom v React?