Ir al contenido principal

Fundamentos de Redux, Parte 1: Introducción a Redux

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Lo que aprenderás
  • Qué es Redux y por qué podrías querer usarlo
  • Las piezas básicas que componen una app Redux

Introducción​

¡Bienvenido al tutorial de Fundamentos de Redux! Este tutorial te introducirá a los conceptos, principios y patrones fundamentales del uso de Redux. Cuando termines, deberías entender las diferentes piezas que componen una app Redux, cómo fluyen los datos al usar Redux y nuestros patrones recomendados estándar para construir apps Redux.

En la Parte 1 de este tutorial, veremos brevemente un ejemplo mínimo de una app Redux funcional para identificar sus piezas, y en Parte 2: Conceptos y Flujo de Datos de Redux examinaremos esas piezas con más detalle y cómo fluyen los datos en una aplicación Redux.

Comenzando en Parte 3: Estado, Acciones y Reducers, usaremos ese conocimiento para construir una pequeña app de ejemplo que demuestre cómo encajan estas piezas y hablaremos sobre cómo funciona Redux en la práctica. Después de construir la app de ejemplo "manualmente" para que veas exactamente lo que sucede, hablaremos sobre algunos patrones y abstracciones estándar usados típicamente con Redux. Finalmente, veremos cómo estos ejemplos de bajo nivel se traducen en patrones de alto nivel que recomendamos para uso real en aplicaciones.

Cómo leer este tutorial​

Este tutorial te enseñará "cómo funciona Redux", así como por qué existen estos patrones.

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

precaución

Ten en cuenta que este tutorial muestra intencionadamente patrones de lógica de Redux de estilo antiguo que requieren más código que los patrones de "modern Redux" con Redux Toolkit que enseñamos como el enfoque correcto para construir aplicaciones con Redux hoy en día, con el fin de explicar los principios y conceptos detrás de Redux. No está pensado para ser un proyecto listo para producción.

Consulta estas páginas para aprender a usar "modern Redux" con Redux Toolkit:

Una vez que entiendas cómo encaja todo, veremos cómo usar Redux Toolkit para simplificar las cosas. Redux Toolkit es la forma recomendada de construir apps de producción con Redux, y está construido sobre todos los conceptos que veremos en este tutorial. Cuando comprendas los conceptos básicos cubiertos aquí, entenderás cómo usar Redux Toolkit de manera más eficiente.

Hemos intentado que estas explicaciones sean accesibles para principiantes, pero necesitamos hacer algunas suposiciones sobre lo que ya sabes para poder centrarnos en explicar Redux. Este tutorial asume que conoces:

Requisitos previos

Si aún no te sientes cómodo con esos temas, te animamos a dedicar tiempo a familiarizarte con ellos primero, y luego volver para aprender sobre Redux. ¡Estaremos aquí cuando estés listo!

Finalmente, debes asegurarte de tener instaladas las extensiones React DevTools y Redux DevTools en tu navegador:

¿Qué es Redux?​

Es útil entender primero qué es esta cosa llamada "Redux". ¿Qué hace? ¿Qué problemas me ayuda a resolver? ¿Por qué querría usarlo?

Redux es un patrón y biblioteca para gestionar y actualizar el estado global de la aplicación, donde la UI dispara eventos llamados "actions" que describen lo sucedido, y una lógica de actualización separada llamada "reducers" modifica el estado en respuesta. Sirve como almacén centralizado para el estado que debe usarse en toda tu aplicación, con reglas que garantizan que el estado solo se puede actualizar de manera predecible.

¿Por qué debería usar Redux?​

Redux te ayuda a gestionar el estado "global" - estado necesario en muchas partes de tu aplicación.

Los patrones y herramientas proporcionados por Redux facilitan comprender cuándo, dónde, por qué y cómo se actualiza el estado en tu aplicación, y cómo se comportará tu lógica de aplicación cuando ocurran esos cambios. Redux te guía hacia la escritura de código predecible y testeable, lo que ayuda a darte confianza en que tu aplicación funcionará como se espera.

¿Cuándo debería usar Redux?​

Redux te ayuda a manejar el estado compartido, pero como cualquier herramienta, tiene compensaciones. Implica aprender más conceptos y escribir más código. También añade cierta complejidad indirecta a tu código y requiere seguir ciertas restricciones. Es un equilibrio entre productividad a corto y largo plazo.

Redux es más útil cuando:

  • Tienes grandes cantidades de estado de aplicación necesarias en muchos lugares

  • El estado de la aplicación se actualiza frecuentemente con el tiempo

  • La lógica para actualizar ese estado puede ser compleja

  • La aplicación tiene una base de código mediana o grande con múltiples colaboradores

No todas las aplicaciones necesitan Redux. Dedica tiempo a considerar qué tipo de app estás construyendo y decide qué herramientas son mejores para resolver los problemas específicos que enfrentas.

¿Quieres saber más?

Si no estás seguro de si Redux es adecuado para tu aplicación, estos recursos ofrecen orientación adicional:

Bibliotecas y herramientas de Redux​

Redux es una pequeña biblioteca JS independiente. Sin embargo, se usa comúnmente con otros paquetes:

Redux Toolkit​

Redux Toolkit es nuestro enfoque recomendado para escribir lógica Redux. Contiene paquetes y funciones esenciales para construir apps Redux, incorpora mejores prácticas recomendadas, simplifica tareas comunes, previene errores frecuentes y facilita el desarrollo de aplicaciones Redux.

React-Redux​

Redux se integra con cualquier framework UI, siendo React el más común. React-Redux es nuestro paquete oficial que permite a tus componentes React interactuar con el store mediante lectura de estado y despacho de acciones.

Extensión Redux DevTools​

La Extensión Redux DevTools muestra el histórico de cambios en el store, permitiendo depurar eficazmente aplicaciones con técnicas avanzadas como "depuración de viaje en el tiempo".

Conceptos Básicos de Redux​

Ahora que sabes qué es Redux, veamos brevemente las piezas que componen una app Redux y cómo funciona.

información

El resto de la descripción en esta página se centra únicamente en la biblioteca principal de Redux (el paquete redux). Hablaremos de los otros paquetes relacionados con Redux a lo largo del resto del tutorial.

El Almacén de Redux​

El centro de cada aplicación Redux es el store. Un "store" es un contenedor que guarda el estado global de tu aplicación.

Un store es un objeto JavaScript con algunas funciones y capacidades especiales que lo diferencian de un objeto global plano:

  • Nunca debes modificar directamente el estado almacenado en el store de Redux

  • En su lugar, la única forma de actualizar el estado es crear un objeto action simple que describa "algo que ocurrió en la aplicación", y luego despachar esa acción al store para informar lo sucedido.

  • Cuando se despacha una acción, el store ejecuta la función reducer raíz, que calcula el nuevo estado basándose en el estado anterior y la acción

  • Finalmente, el store notifica a los subscribers que el estado se ha actualizado, permitiendo que la UI se actualice con los nuevos datos.

Aplicación de ejemplo del núcleo de Redux​

Veamos un ejemplo mínimo funcional de una app Redux: un contador simple:

Dado que Redux es una biblioteca JS independiente sin dependencias, este ejemplo carga solo una etiqueta script para la biblioteca Redux, usando JS básico y HTML para la UI. En la práctica, Redux normalmente se usa instalando los paquetes de NPM, mientras la UI se crea con bibliotecas como React.

información

Parte 5: UI y React muestra cómo usar Redux con React.

Desglosemos este ejemplo en sus partes para entender qué ocurre.

Estado, acciones y reducers​

Comenzamos definiendo un valor state inicial para describir la aplicación:

// Define an initial state value for the app
const initialState = {
  value: 0
}

En esta app, rastrearemos un único número con el valor actual del contador.

Las apps Redux normalmente tienen un objeto JS como raíz del estado, con otros valores dentro.

Luego definimos una función reducer. Este recibe dos argumentos: el state actual y un objeto action que describe lo sucedido. Al iniciar la app Redux, aún no tenemos estado, así que usamos initialState como valor predeterminado:

// Create a "reducer" function that determines what the new state
// should be when something happens in the app
function counterReducer(state = initialState, action) {
  // Reducers usually look at the type of action that happened
  // to decide how to update the state
  switch (action.type) {
    case 'counter/incremented':
      return { ...state, value: state.value + 1 }
    case 'counter/decremented':
      return { ...state, value: state.value - 1 }
    default:
      // If the reducer doesn't care about this action type,
      // return the existing state unchanged
      return state
  }
}

Los objetos de acción siempre tienen un campo type: un string único que actúa como identificador. El type debe ser legible para que cualquiera entienda su significado. Aquí usamos 'counter' como prefijo del tipo de acción, y la segunda parte describe "lo ocurrido". Como nuestro 'contador' se 'incrementó', escribimos el tipo como 'counter/incremented'.

Según el tipo de acción, debemos devolver un objeto nuevo como state resultante, o el objeto state existente si nada cambia. Actualizamos el estado inmutablemente copiando el estado existente y modificando la copia, nunca alterando el objeto original directamente.

Store​

Con la función reducer, creamos una instancia del store usando la API createStore de Redux.

// Create a new Redux store with the `createStore` function,
// and use the `counterReducer` for the update logic
const store = Redux.createStore(counterReducer)

Pasamos la función reducer a createStore, que la usa para generar el estado inicial y calcular futuras actualizaciones.

UI​

En cualquier aplicación, la interfaz de usuario muestra el estado actual. Cuando un usuario actúa, la app actualiza sus datos y redibuja la UI con los nuevos valores.

// Our "user interface" is some text in a single HTML element
const valueEl = document.getElementById('value')

// Whenever the store state changes, update the UI by
// reading the latest store state and showing new data
function render() {
  const state = store.getState()
  valueEl.innerHTML = state.value.toString()
}

// Update the UI with the initial data
render()
// And subscribe to redraw whenever the data changes in the future
store.subscribe(render)

En este ejemplo mínimo, usamos elementos HTML básicos como UI, con un único <div> que muestra el valor actual.

Escribimos una función que obtiene el último estado del store usando store.getState(), toma ese valor y actualiza la UI para mostrarlo.

El store de Redux nos permite llamar a store.subscribe() y pasar una función de callback suscrita que se invocará cada vez que se actualice el store. Así, podemos pasar nuestra función render como suscriptor, sabiendo que cada actualización del store permite refrescar la UI con el último valor.

Redux es una biblioteca independiente que puede usarse en cualquier entorno, lo que significa que también puede integrarse con cualquier capa de UI.

Despachando acciones​

Finalmente, debemos responder a la interacción del usuario creando objetos action que describan lo ocurrido y despachándolos al store. Al llamar store.dispatch(action), el store ejecuta el reducer, calcula el nuevo estado y notifica a los suscriptores para actualizar la UI.

// Handle user inputs by "dispatching" action objects,
// which should describe "what happened" in the app
document.getElementById('increment').addEventListener('click', function () {
  store.dispatch({ type: 'counter/incremented' })
})

document.getElementById('decrement').addEventListener('click', function () {
  store.dispatch({ type: 'counter/decremented' })
})

document
  .getElementById('incrementIfOdd')
  .addEventListener('click', function () {
    // We can write logic to decide what to do based on the state
    if (store.getState().value % 2 !== 0) {
      store.dispatch({ type: 'counter/incremented' })
    }
  })

document
  .getElementById('incrementAsync')
  .addEventListener('click', function () {
    // We can also write async logic that interacts with the store
    setTimeout(function () {
      store.dispatch({ type: 'counter/incremented' })
    }, 1000)
  })

Aquí despacharemos acciones que harán que el reducer sume 1 o reste 1 al valor actual del contador.

También podemos escribir código que solo despache una acción si se cumple cierta condición, o implementar lógica asíncrona que despache acciones tras un retardo.

Flujo de datos​

Podemos resumir el flujo de datos en una app Redux con este diagrama, que representa cómo:

  • Las acciones se despachan en respuesta a interacciones como un clic

  • El store ejecuta la función reducer para calcular un nuevo estado

  • La UI lee el nuevo estado para mostrar los valores actualizados

(¡No te preocupes si estos conceptos no están totalmente claros aún! Mantén esta imagen en mente mientras avanzas en el tutorial y verás cómo encajan las piezas.)

Diagrama de flujo de datos en Redux

Lo que has aprendido​

Aunque el ejemplo del contador es pequeño, muestra todas las piezas funcionales de una app Redux real. Todo lo que veremos en las próximas secciones amplía estos conceptos básicos.

Con esto en mente, repasemos lo aprendido hasta ahora:

Resumen
  • Redux es una biblioteca para gestionar el estado global de aplicaciones
    • Suele usarse con React-Redux para integrar Redux con React
    • Redux Toolkit es el método estándar para escribir lógica Redux
  • El patrón de actualización de Redux separa "qué sucedió" de "cómo cambia el estado"
    • Las acciones son objetos planos con campo type que describen "qué sucedió"
    • Los reductores son funciones que calculan nuevo estado basado en estado previo + acción
    • Un almacén Redux ejecuta el reductor raíz al despachar una acción
  • Redux usa estructura de "flujo de datos unidireccional"
    • El estado describe la condición de la app en un momento dado
    • La UI se renderiza basándose en ese estado
    • Cuando ocurre algo:
      • La UI despacha una acción
      • El almacén ejecuta reductores y actualiza el estado
      • El almacén notifica a la UI sobre cambios
    • La UI se vuelve a renderizar con el nuevo estado

¿Qué sigue?​

Ahora que conoces las piezas básicas de una app Redux, avanza a la Parte 2: Conceptos y Flujo de Datos, donde examinaremos con más detalle cómo fluyen los datos en una aplicación Redux.