Ir al contenido principal

Empezando con 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 →

Redux es una biblioteca de JavaScript para la gestión predecible y mantenible del estado global.

Te ayuda a escribir aplicaciones con comportamiento consistente, que funcionan en distintos entornos (cliente, servidor y nativo), y son fáciles de probar. Además, ofrece una excelente experiencia de desarrollo, como la edición de código en vivo combinada con un depurador de viaje en el tiempo.

Puedes usar Redux junto con React, o con cualquier otra biblioteca de vistas. Es ligero (2kB, incluyendo dependencias), pero cuenta con un amplio ecosistema de complementos disponibles.

Redux Toolkit es nuestro enfoque oficial recomendado para escribir lógica de Redux. Envuelve el núcleo de Redux e incluye paquetes y funciones esenciales para construir aplicaciones Redux. Redux Toolkit incorpora nuestras mejores prácticas recomendadas, simplifica la mayoría de tareas de Redux, previene errores comunes y facilita la escritura de aplicaciones Redux.

RTK incluye utilidades que simplifican casos de uso comunes, como la configuración del store, creación de reducers y lógica de actualización inmutable, e incluso crear "slices" completos de estado de una vez.

Ya seas un usuario nuevo de Redux configurando tu primer proyecto, o un usuario experimentado que quiere simplificar una aplicación existente, Redux Toolkit puede ayudarte a mejorar tu código Redux.

Instalación​

Redux Toolkit​

Redux Toolkit está disponible como paquete en NPM para usar con empaquetadores de módulos o en aplicaciones Node:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Creación de un nuevo proyecto Redux​

La forma recomendada de comenzar nuevas aplicaciones con Redux es usar una de nuestras plantillas oficiales. Estas plantillas vienen preconfiguradas con Redux Toolkit e incluyen una pequeña aplicación de ejemplo para que empieces.

Para crear un nuevo proyecto, puedes usar una herramienta como tiged para clonar y extraer la plantilla.

# Vite + TypeScript
npx tiged reduxjs/redux-templates/packages/vite-template-redux my-app

# Create React App + TypeScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux-typescript my-app

# Create React App + JavaScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux my-app

# Expo + TypeScript
npx tiged reduxjs/redux-templates/packages/expo-template-redux-typescript my-app

# React Native + TypeScript
npx tiged reduxjs/redux-templates/packages/react-native-template-redux-typescript my-app

# Standalone Redux Toolkit App Structure Example
npx tiged reduxjs/redux-templates/packages/rtk-app-structure-example my-app

Además de nuestras plantillas oficiales, la comunidad ha creado otras plantillas, como la plantilla with-redux para Next.js.

# Next.js + Redux
npx create-next-app --example with-redux my-app

Núcleo de Redux​

La biblioteca central de Redux está disponible como paquete en NPM para usar con empaquetadores de módulos o en aplicaciones Node:

# NPM
npm install redux

# Yarn
yarn add redux

El paquete incluye una compilación ESM precompilada que puede usarse como una etiqueta <script type="module"> directamente en el navegador.

Para más detalles, consulta la página de Instalación.

Ejemplo básico​

Todo el estado global de tu aplicación se almacena en un árbol de objetos dentro de un único store. La única forma de cambiar el árbol de estado es crear una action (acción), un objeto que describe lo que ocurrió, y hacer dispatch (despacharla) al store. Para especificar cómo se actualiza el estado en respuesta a una acción, escribes funciones reducer puras que calculan un nuevo estado basado en el estado anterior y la acción.

Redux Toolkit simplifica el proceso de escribir lógica de Redux y configurar el store. Con Redux Toolkit, la lógica básica de la aplicación se vería así:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

En lugar de mutar el estado directamente, especificas los cambios que deseas realizar mediante objetos simples llamados acciones. Luego escribes una función especial llamada reducer que decide cómo cada acción transforma el estado completo de la aplicación.

En una aplicación Redux típica, hay un único store con una función root reducer. A medida que tu aplicación crece, divides este root reducer en reducers más pequeños que operan independientemente sobre diferentes partes del árbol de estado. Esto es similar a cómo una aplicación React tiene un único componente raíz compuesto por muchos componentes pequeños.

Esta arquitectura puede parecer excesiva para una aplicación contadora, pero su belleza radica en cómo escala perfectamente a aplicaciones grandes y complejas. Además, permite herramientas de desarrollo muy potentes, ya que es posible rastrear cada mutación hasta la acción que la causó. Puedes grabar sesiones de usuario y reproducirlas simplemente reejecutando cada acción.

Redux Toolkit nos permite escribir lógica más concisa y fácil de leer, manteniendo el mismo comportamiento y flujo de datos de Redux.

Ejemplo heredado​

A modo de comparación, la sintaxis antigua original de Redux (sin abstracciones) se parece a esto:

import { createStore } from 'redux'

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Aprende Redux​

Disponemos de diversos recursos para ayudarte a aprender Redux.

Tutorial de Redux Essentials​

El tutorial de Redux Essentials es un enfoque "de arriba hacia abajo" que enseña "cómo usar Redux correctamente" con nuestras APIs recomendadas y mejores prácticas actuales. Te recomendamos empezar aquí.

Tutorial de Redux Fundamentals​

El tutorial de Redux Fundamentals es un enfoque "de abajo hacia arriba" que explica "cómo funciona Redux" desde los principios fundamentales sin abstracciones, y por qué existen los patrones de uso estándar.

Directo: Aprende Redux Moderno​

El mantenedor de Redux Mark Erikson participó en el programa "Learn with Jason" para explicar cómo recomendamos usar Redux actualmente. El directo incluye una aplicación de ejemplo que muestra cómo usar Redux Toolkit y los hooks de React-Redux con TypeScript, además de las nuevas APIs RTK Query para obtención de datos.

Consulta la página de notas del directo "Aprende Redux Moderno" para ver la transcripción y enlaces al código fuente de la aplicación de ejemplo.

Tutoriales adicionales​

Otros recursos​

Ayuda y debate​

El canal #redux de la comunidad Reactiflux en Discord es nuestro recurso oficial para todas las preguntas relacionadas con el aprendizaje y uso de Redux. Reactiflux es un excelente lugar para conversar, hacer preguntas y aprender - ¡únete a nosotros!

También puedes hacer preguntas en Stack Overflow usando la etiqueta #redux.

Si tienes un informe de errores o necesitas dejar otros comentarios, por favor abre un issue en el repositorio de GitHub

¿Deberías usar Redux?​

Redux es una herramienta valiosa para organizar tu estado, pero también deberías considerar si es apropiada para tu situación. No uses Redux solo porque alguien dijo que deberías hacerlo - tómate un tiempo para entender los beneficios potenciales y las compensaciones de usarlo.

Aquí tienes algunas sugerencias sobre cuándo tiene sentido usar Redux:

  • Tienes cantidades razonables de datos que cambian con el tiempo

  • Necesitas una única fuente de verdad para tu estado

  • Consideras que mantener todo tu estado en un componente de nivel superior ya no es suficiente

Para más reflexiones sobre cómo debe usarse Redux, consulta: