Redux: qué es, patrón de gestión del estado en React Native
Redux es un contenedor predecible de gestión del estado para aplicaciones JavaScript, creado por Dan Abramov en 2015. Redux implementa un flujo de datos unidireccional basado en la arquitectura Flux: el estado se almacena en un único Store, se modifica solo mediante funciones Reducer puras y se inicia a través de Action con Dispatch. Según npm Trends, Redux mantiene más de 7 millones de descargas semanales, siendo el estándar para la gestión del estado en React Native y aplicaciones web.
Puntos clave
- Store — la única fuente de verdad que almacena todo el árbol de estado de la aplicación
- Action — un objeto con el campo type que describe la intención de cambiar el estado
- Reducer — una función pura (prevState, action) => newState sin efectos secundarios
- Dispatch — el método del Store para enviar una Action al Reducer
- Middleware — una capa entre dispatch y reducer para operaciones asíncronas y registro
¿Qué es Redux?
Redux es un patrón arquitectónico y una biblioteca para la gestión del estado, basado en tres principios: única fuente de verdad, estado de solo lectura y cambios mediante funciones puras. A diferencia de MVC, donde el modelo puede cambiar el estado de forma impredecible, Redux garantiza determinismo: con los mismos datos de entrada, el resultado siempre es el mismo.
Redux se inspiró en la arquitectura Flux de Facebook y en el lenguaje Elm. La principal diferencia con Flux es un único Store en lugar de varios. En Redux, todo el estado de la aplicación — objetos, arrays, indicadores de carga — se almacena en un solo árbol. Esto simplifica la depuración, las pruebas y la depuración con viaje en el tiempo. El desarrollador puede guardar todo el Store, reproducir una secuencia de Actions y ver cómo cambió el estado en cada paso.
Según la encuesta State of JS 2025, el 68% de los encuestados que usan gestión del estado eligen Redux o Redux Toolkit. La herramienta es compatible con todos los frameworks modernos: React, React Native, Angular, Vue e incluso JavaScript puro sin frameworks.
Flujo de datos unidireccional
El flujo de datos unidireccional es el principio clave de Redux, donde los datos se mueven estrictamente en una dirección: View → Action → Dispatch → Reducer → Store → View. Ningún componente puede cambiar el Store directamente. Una View solo se suscribe a los cambios mediante useSelector o connect e inicia cambios mediante dispatch.
Ciclo de trabajo de Redux: el usuario hace clic en un botón → el componente llama a dispatch({ type: 'INCREMENT' }) → el Store pasa la Action al Root Reducer → el Reducer calcula un nuevo estado → el Store notifica a los suscriptores → la View se vuelve a renderizar con los nuevos datos. Este ciclo garantiza que cada cambio tenga una causa explícita en forma de una Action específica.
DevTools — una herramienta integrada de Redux para monitorear cada Action, el estado del Store y el tiempo de ejecución. El desarrollador ve una lista de todas las Actions enviadas, la diferencia de estado (diff) antes y después, y puede retroceder a cualquier estado anterior. Esto hace que la depuración de estados complejos sea decenas de veces más rápida en comparación con el registro convencional.
Componentes clave de Redux
Store — un objeto que contiene el árbol de estado completo de la aplicación. Se crea mediante configureStore (RTK) o createStore. Store proporciona tres métodos: getState() para lectura, dispatch(action) para cambios y subscribe(listener) para suscripción. En Redux Toolkit, Store ya incluye middleware, DevTools y soporte para slices.
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action y Action Creator — una Action es un objeto con el campo obligatorio type (una constante de cadena) y un payload opcional (datos). Un Action Creator es una función que devuelve una Action. En Redux Toolkit se usa createAction para generar Actions con tipado automático.
Reducer — una función pura que recibe el estado actual y una Action, devolviendo un nuevo estado. Un Reducer no debe: mutar el estado (se devuelve un nuevo objeto), llamar a APIs, generar números aleatorios ni acceder a Date. La inmutabilidad se logra mediante el operador spread ... o Immer (integrado en RTK).
| Componente | Responsabilidad | Restricciones |
|---|---|---|
| Store | Almacenar estado, dispatch, subscribe | Uno por aplicación |
| Action | Describir la intención de cambiar el estado | Debe tener type |
| Reducer | Calcular nuevo estado | Función pura, sin efectos secundarios |
| Dispatch | Enviar Action al Reducer | Síncrono por defecto |
| Selector | Extraer datos del Store | Memoización mediante createSelector |
Middleware y Redux Thunk
Middleware es una cadena de funciones insertada entre la llamada dispatch y el momento en que la Action llega al Reducer. Cada middleware recibe la API del Store y puede registrar, modificar, retrasar o cancelar Actions. Redux Thunk es el middleware estándar para operaciones asíncronas, que permite despachar funciones en lugar de objetos.
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)Middlewares populares: Redux Thunk — para llamadas asíncronas simples, Redux Saga — para escenarios complejos con sagas generadoras (debounce, race, peticiones paralelas), Redux Observable — basado en RxJS para flujos reactivos. En Redux Toolkit, el middleware se conecta mediante el parámetro middleware en configureStore.
Según la encuesta State of JS 2025, Thunk se usa en el 72% de los proyectos Redux, Saga en el 18% y Observable en el 5%. Para la mayoría de las aplicaciones, una combinación de Thunk + RTK Query es suficiente para cubrir el 95% de los flujos de trabajo asíncronos con datos.
Redux Toolkit y RTK Query
Redux Toolkit (RTK) es la forma oficial y recomendada de escribir lógica Redux, lanzada en 2019. RTK incluye configureStore, createSlice, createAsyncThunk y createEntityAdapter, reduciendo el boilerplate de Redux en un 60-70%. En lugar de crear manualmente Action Creators, Reducers y tipos, se utiliza un solo createSlice.
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query es una solución integrada para trabajar con APIs basada en Redux Toolkit. Permite definir endpoints de forma declarativa mediante createApi con generación automática de hooks, almacenamiento en caché, invalidación de etiquetas y actualizaciones optimistas. RTK Query reemplaza la escritura manual de Thunk, Reducer y Selector para cada petición a la API.
Entity Adapter — la utilidad createEntityAdapter para normalizar colecciones de entidades. Proporciona reducers CRUD integrados, selectores y ordenación para arrays de objetos. Si el Store contiene listas de usuarios, productos o pedidos — Entity Adapter reduce el código del reducer en un 80%.
Redux en React Native
React Native Redux es el stack estándar para aplicaciones móviles en JavaScript. Redux se integra mediante Provider de react-redux, envolviendo el componente raíz de la aplicación. Los hooks useSelector y useDispatch dan acceso al estado a los componentes sin props drilling. Persist — redux-persist guarda el Store en AsyncStorage o MMKV, restaurando el estado tras reiniciar la aplicación.
Middleware para React Native: redux-flipper para depuración mediante Flipper, redux-observable para flujos reactivos con controladores nativos, react-native-mmkv para almacenamiento persistente rápido. El plugin de navegación redux-first-router conecta las pantallas con el Store, permitiendo restaurar el estado de la pantalla al regresar.
En React Native, Redux se usa junto con una estrategia network-first: la aplicación primero intenta cargar datos del servidor, luego los almacena en caché en el Store mediante RTK Query o redux-persist. El modo offline se logra combinando Redux + NetInfo + una cola de Actions para reenviarlas cuando se restablezca la conexión.
Preguntas frecuentes
¿En qué se diferencia Redux de Context API en React?
Redux es una solución completa con Store, DevTools, Middleware y estado inmutable. Context API es un mecanismo integrado de React para pasar datos sin props drilling. Context es adecuado para temas globales y localización, mientras que Redux es para estados complejos con operaciones asíncronas, almacenamiento en caché y depuración. En aplicaciones grandes, Context provoca re-renderizados innecesarios, mientras que Redux con selectores resuelve este problema.
¿Qué es Immer en Redux Toolkit?
Immer es una biblioteca para el manejo inmutable del estado, integrada en Redux Toolkit. Immer permite escribir reducers como si se mutara el estado directamente: state.value += 1. Internamente, Immer crea un objeto proxy (draft), rastrea los cambios y devuelve un nuevo objeto inmutable. Esto reduce el volumen de código del reducer en un 50% y elimina las mutaciones accidentales.
¿Cómo probar Redux?
La lógica de Redux se prueba de forma aislada: Reducer — una función pura, basta con llamarla con diferentes Actions y comprobar el resultado. Action Creator — verificar el objeto devuelto. Thunk — mockear la API, llamar a dispatch y comprobar qué Actions se enviaron. Componente con useSelector — usar Provider con un Store de prueba en el renderizador. Redux DevTools ayudan a escribir pruebas reproduciendo una secuencia de Actions de una sesión real.
¿Cuándo usar Redux en lugar de useState?
useState es suficiente para el estado local de un solo componente: texto de un campo, modal abierto/cerrado. Redux se necesita cuando el estado se comparte entre muchas pantallas, requiere sincronización asíncrona (datos del servidor), debe persistir entre reinicios de la aplicación (persist) o requiere depuración con viaje en el tiempo. Para aplicaciones pequeñas, Redux es excesivo — use Context + useReducer en su lugar.
¿Qué es la normalización en Redux?
Normalizr es una biblioteca para normalizar datos anidados en una estructura plana de Store. En lugar de almacenar objetos profundos como user.posts[0].comments, la normalización crea diccionarios: entities.users, entities.posts, entities.comments con referencias por ID. Esto simplifica la actualización de una sola entidad en todos los lugares y acelera los selectores. Redux Toolkit recomienda datos normalizados para modelos complejos.
Resumen
- Redux — un contenedor de estado predecible con un único Store y Reducers puros
- Action — un objeto con type, Reducer — una función pura, Dispatch — el mecanismo de envío
- Redux Toolkit — la API oficial con createSlice, createAsyncThunk y RTK Query
- Middleware — una capa para asincronía: Thunk, Saga, Observable
- React Native se integra mediante Provider, useSelector y redux-persist para modo offline
- DevTools — depuración con viaje en el tiempo que reproduce cada Action
- Normalizr — normalización de datos para selectores y actualizaciones eficientes
Desarrollaremos una aplicación móvil llave en mano
IT Sectr crea aplicaciones para iOS y Android para startups y empresas desde 2017. Le asesoraremos y le propondremos la mejor solución.
Lea también