← Volver al listado de tecnologías

Capítulo 5: Estado Redux

Por: Siempre Listo
reactotronreduxestadodebugging

Estado Redux

Reactotron tiene integración nativa con Redux para inspeccionar y modificar estado.

Instalación del Plugin

npm install reactotron-redux

Configuración

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

const reactotron = Reactotron
  .configure({ name: 'Mi App' })
  .useReactNative()
  .use(reactotronRedux())
  .connect();

export default reactotron;

Conectar con Store

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import Reactotron from './ReactotronConfig';

const store = configureStore({
  reducer: rootReducer,
  enhancers: (getDefaultEnhancers) =>
    __DEV__ && Reactotron.createEnhancer
      ? getDefaultEnhancers().concat(Reactotron.createEnhancer())
      : getDefaultEnhancers(),
});

export default store;

Funcionalidades

Ver Acciones

Cada dispatch aparece en la timeline:

│ 10:30:01  REDUX    user/login       │
│           Action: { email: "..." }  │
│           State: { user: {...} }    │

Modificar Estado

Click derecho en un estado → “Subscribe to state” Edita el JSON y aplica cambios.

Snapshots

Guarda y restaura estados completos:

Ejercicio Práctico

Objetivo

Conectar Redux con Reactotron y explorar el estado.

Pasos

  1. Instala reactotron-redux
  2. Configura el enhancer
  3. Dispara acciones y observa en timeline
  4. Modifica estado desde Reactotron
Ver solución 
// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

export default Reactotron
  .configure({ name: 'Redux App' })
  .useReactNative()
  .use(reactotronRedux())
  .connect();

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import Reactotron from './ReactotronConfig';
import userReducer from './userSlice';

export const store = configureStore({
  reducer: { user: userReducer },
  enhancers: (getDefault) =>
    __DEV__
      ? getDefault().concat(Reactotron.createEnhancer())
      : getDefault(),
});

Criterios de Éxito

← Volver al listado de tecnologías