¿Cómo se produce la interacción de datos entre Redux…

La interacción se realiza a través de tres mecanismos principales: connect, useSelector y useDispatch.

connect (para componentes de clase, pero también se puede usar con componentes funcionales): Vincula un componente de React con el almacenamiento de Redux. Toma dos funciones: mapStateToProps y mapDispatchToProps.
- mapStateToProps(state, ownProps): Obtiene el estado del Store y las props del componente, devolviendo un objeto con datos del estado que estarán disponibles para el componente a través de las props.
- mapDispatchToProps(dispatch, ownProps): Recibe la función dispatch y las props del componente, devolviendo un objeto con funciones de acción que estarán disponibles para el componente a través de las props para enviar acciones al Store.
- El valor devuelto por connect es una función de orden superior que envuelve al componente.
```
// Fragmento de código
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}>Incrementar</button>
  </div>
);

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

useSelector (hook para componentes funcionales): Permite extraer datos del estado de Redux Store. Toma una función selector que recibe el estado actual de Redux como argumento y devuelve el fragmento de datos deseado.

// Fragmento de código
import { useSelector } from 'react-redux';

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

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

useDispatch (hook para componentes funcionales): Devuelve una referencia a la función dispatch del Store de Redux. Se usa para enviar (dispatch) acciones al Store.

// Fragmento de código
import { useDispatch } from 'react-redux';

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

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

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

En resumen, los datos de Redux (obtenidos mediante connect o useSelector) están disponibles en el componente como props o variables, y las funciones para modificar el estado (pasadas a través de connect o useDispatch) se usan para enviar acciones, que son procesadas por los reductores y actualizan el estado del Store. Cuando cambia la parte correspondiente del estado, el componente vinculado se vuelve a renderizar automáticamente con los nuevos datos.

¿Cómo se produce la interacción de datos entre Redux y el componente en React?