Módulo 7: Introducción a Redux (opcional)

7.1 Conceptos básicos de Redux

Store, Acciones, Reductores:

Redux es una biblioteca de gestión de estado predecible para aplicaciones JavaScript. Sus conceptos fundamentales incluyen:

• Store: El store es un objeto que contiene el estado global de la aplicación. Es el único lugar donde se almacena el estado de la aplicación.
• Acciones: Las acciones son objetos planos que describen un cambio en el estado. Se envían al store utilizando funciones llamadas "action creators".
• Reductores: Los reductores son funciones que especifican cómo cambia el estado de la aplicación en respuesta a una acción. Cada reductor maneja una parte específica del estado.

Flujo de datos en Redux:

1. Una acción es despachada por un componente.
2. El reductor correspondiente procesa la acción y actualiza el estado en el store.
3. Los componentes conectados al store reciben las actualizaciones del estado y se vuelven a renderizar según sea necesario.

7.2 Integración de Redux en una aplicación React

Configuración de la store:

Para usar Redux en una aplicación React, primero debes instalar las bibliotecas necesarias:

npm install redux react-redux
    

Creación de un store:

import { createStore } from 'redux';

// Reductor inicial
const contadorReducer = (state = { contador: 0 }, action) => {
  if (action.type === 'INCREMENTAR') {
    return { contador: state.contador + 1 };
  }
  return state;
};

const store = createStore(contadorReducer);

export default store;
    

Conexión de componentes a Redux:

import React from 'react';
import { connect } from 'react-redux';

class Contador extends React.Component {
  render() {
    return (
      <div>
        <p>Contador: {this.props.contador}</p>
        <button onClick={this.props.incrementar}>Incrementar</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    contador: state.contador,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementar: () => dispatch({ type: 'INCREMENTAR' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Contador);
    

Resumen:

La integración de Redux en una aplicación React proporciona un sistema de gestión de estado centralizado que simplifica la administración del estado y la comunicación entre componentes.

Recuerda que Redux es opcional y puede ser más adecuado para aplicaciones más grandes y complejas. Si decides explorar Redux en profundidad, hay conceptos adicionales, como middleware y acciones asíncronas, que pueden enriquecer tu comprensión y habilidades en el desarrollo de aplicaciones React.