Kā notiek datu mijiedarbība starp Redux un React…

Saskarsme notiek ca trīs galvenajiem mehānismiem: connect, useSelector un useDispatch.

connect (klases komponentiem, bet arī var izmantot ar funkcionālajām): Savieno React komponentu ar Redux glabātuvi. Pieņem divas funkcijas: mapStateToProps un mapDispatchToProps.
- mapStateToProps(state, ownProps): Saņem stāvokli no glabātuves un komponenta propsus, atgriež objektu ar stāvokļa datiem, kas būs pieejami caur props.
- mapDispatchToProps(dispatch, ownProps): Saņem dispatch funkciju un komponenta propsus, atgriež objektu ar funkcijām-aktīviem, kas būs pieejami caur props, sūtot darbības uz glabātuvi.
- connect — augstākā līmeņa funkcija, kas ietver komponentu.
```
// Koda fragments
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 (huks funkciju komponentiem): Ļauj izvilkt datus no Redux stāvokļa. Pieņem selektora funkciju, kas saņem pašreizējo Redux stāvokli kā argumentu un atgriež vēlamo datu fragmentu.

// Koda fragments
import { useSelector } from 'react-redux';

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

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

useDispatch (huks funkcionālajām komponentēm): Atgriež saiti uz dispatch funkciju no Redux glabātuves. Izmanto darbību sūtīšanai.

// Koda fragments
import { useDispatch } from 'react-redux';

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

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

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

Galu galā, dati no Redux (connect vai useSelector) kļūst pieejami komponentā kā props vai mainīgie, bet funkcijas stāvokļa maiņai (connect vai useDispatch) tiek izmantotas darbību sūtīšanai, kas apstrādājas ar reduktoriem un atjauno glabātuves stāvokli. Kad attiecīgā stāvokļa daļa mainās, saistītā komponenta automātiski pārrenderējas ar jaunajiem datiem.

Kā notiek datu mijiedarbība starp Redux un React komponentu?