El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Redux: Conectando a React

Siguiente ►
►

En esta lección, aprenderemos cómo conectar Redux con una aplicación React. Redux es una biblioteca para la gestión del estado que nos permite manejar el estado de nuestra aplicación de manera predecible y centralizada. Conectar Redux a React nos permite acceder al estado global de la aplicación y despachar acciones desde nuestros componentes.

Objetivos de la Lección

  • Entender cómo conectar Redux con React.
  • Aprender a usar el Provider de react-redux.
  • Utilizar los hooks useSelector y useDispatch para interactuar con el store de Redux.

Requisitos Previos

  • Conocimiento básico de React.
  • Familiaridad con los conceptos de Redux, como acciones, reductores y el store.

Pasos para Conectar Redux a React

  1. Instalación de Dependencias

Primero, necesitamos instalar las dependencias necesarias. Asegúrate de tener redux y react-redux instalados en tu proyecto.

npm install redux react-redux

  1. Configuración del Store

Crea un archivo store.js donde configuraremos nuestro store de Redux.

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

  1. Creación del Reducer

Crea un archivo reducers.js donde definiremos nuestro reductor. Un reductor es una función que toma el estado actual y una acción, y devuelve un nuevo estado.

// reducers.js
const initialState = {
  count: 0
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

export default rootReducer;

  1. Proveer el Store a la Aplicación

Usa el componente Provider de react-redux para envolver tu aplicación y pasarle el store.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

  1. Conectar Componentes con Redux

Ahora, vamos a conectar nuestros componentes a Redux usando los hooks useSelector y useDispatch.

5.1. Usar useSelector para Leer el Estado

El hook useSelector nos permite acceder al estado del store.

// Counter.js
import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

export default Counter;

5.2. Usar useDispatch para Despachar Acciones

El hook useDispatch nos permite despachar acciones al store.

// CounterControls.js
import React from 'react';
import { useDispatch } from 'react-redux';

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default CounterControls;

  1. Integrar los Componentes en la Aplicación

Finalmente, integra los componentes en tu aplicación principal.

// App.js
import React from 'react';
import Counter from './Counter';
import CounterControls from './CounterControls';

const App = () => {
  return (
    <div>
      <Counter />
      <CounterControls />
    </div>
  );
};

export default App;

Ejercicio Práctico

Ejercicio

  1. Crea una nueva acción llamada RESET que restablezca el contador a 0.
  2. Modifica el reductor para manejar la nueva acción RESET.
  3. Añade un nuevo botón en CounterControls que despache la acción RESET.

Solución

1. Crear la Acción RESET

// reducers.js
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    // ... otros casos
    case 'RESET':
      return {
        ...state,
        count: 0
      };
    default:
      return state;
  }
};

2. Añadir el Botón de Reset

// CounterControls.js
import React from 'react';
import { useDispatch } from 'react-redux';

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
};

export default CounterControls;

Conclusión

En esta lección, hemos aprendido cómo conectar Redux con una aplicación React utilizando react-redux. Hemos cubierto cómo configurar el store, crear reductores, y usar los hooks useSelector y useDispatch para interactuar con el estado global. Con estos conocimientos, puedes gestionar el estado de tu aplicación de manera más eficiente y predecible.

En la próxima lección, exploraremos técnicas de optimización del rendimiento en React. ¡Sigue adelante!

◄ Anterior
◄
Siguiente ►
►

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados