Kako se odvija interakcija podataka između Redux-a i…

Интеракција се остварује преко три главна механизма: connect, useSelector и useDispatch.

connect (за класне компоненте, али се може користити и са функционалним): Повезује React компоненту са складиштом Redux. Прихвата две функције: mapStateToProps и mapDispatchToProps.
- mapStateToProps(state, ownProps): Добија стање из Store-а и пропсе компоненте, враћа објекат са подацима из стања, који ће бити доступни преко пропса.
- mapDispatchToProps(dispatch, ownProps): Добија функцију dispatch и пропсе компоненте, враћа објекат са функцијама-акцијама, које ће бити доступне преко пропса за слање акција у Store.
- Враћена вредност connect — функција високог реда, која обавија компоненту.
```
// Фрагмент кода
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 за функционалне компоненте): Омогућава извлачење података из стања Redux Store. Прихвата функцију-селектор, која добија тренутно стање Redux као аргумент и враћа жељени фрагмент података.
```
// Фрагмент кода
import { useSelector } from 'react-redux';

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

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

useDispatch (hook за функционалне компоненте): Враћа референцу на функцију dispatch из Redux Store-а. Користи се за слање (dispatching) акција у Store.

// Фрагмент кода
import { useDispatch } from 'react-redux';

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

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

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

Укратко, подаци из Redux-а (преко connect или useSelector) постају доступни у компонентама као пропси или променљиве, а функције за промену стања (преузете преко connect или useDispatch) се користе за слање акција које обрађују редуктори и ажурирају стање Store-а. При промени одговарајућег дела стања, повезана компонента се аутоматски поново приказује са новим подацима.

Kako se odvija interakcija podataka između Redux-a i komponente u React-u?