Cum are loc interacțiunea datelor între Redux și…

Interacțiunea se realizează prin trei mecanisme principale: connect, useSelector și useDispatch.

connect (pentru componente de clasă, dar poate fi utilizat și cu componente funcționale): Leagă un component React de magazinul Redux. Primește două funcții: mapStateToProps și mapDispatchToProps.
- mapStateToProps(state, ownProps): Obține starea din Store și props-urile componentului, returnând un obiect cu datele din stare care vor fi accesibile prin props.
- mapDispatchToProps(dispatch, ownProps): Primește funcția dispatch și props-urile componentului, returnând un obiect cu funcții de acțiune care vor fi accesibile prin props pentru a trimite acțiuni în Store.
- Valoarea returnată de connect este o funcție de ordin superior care învelește componenta.
```
// Fragment de cod
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}>Crește</button>
  </div>
);

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

useSelector (hook pentru componente funcționale): Permite extragerea datelor din starea Redux Store. Primește o funcție selector care primește starea curentă Redux ca argument și returnează fragmentul de date dorit.

// Fragment de cod
import { useSelector } from 'react-redux';

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

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

useDispatch (hook pentru componente funcționale): Returnează o referință la funcția dispatch din Redux Store. Este utilizat pentru a trimite (dispatch) acțiuni în Store.

// Fragment de cod
import { useDispatch } from 'react-redux';

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

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

  return (
    <button onClick={handleIncrement}>Crește</button>
  );
};

În concluzie, datele din Redux (obținute prin connect sau useSelector) devin accesibile în componentă ca props sau variabile, iar funcțiile pentru modificarea stării (transmise prin connect sau useDispatch) sunt utilizate pentru a trimite acțiuni, care sunt procesate de reducători și actualizează starea Store-ului. Când partea corespunzătoare a stării se schimbă, componenta asociată se re-renderizează automat cu noile date.

Cum are loc interacțiunea datelor între Redux și componenta în React?