← Volver al listado de tecnologías

Capítulo 6: MobX y Zustand

Por: Siempre Listo
reactotronmobxzustandestado

MobX y Zustand

Aprenderás a integrar Reactotron con otros state managers populares.

Integración con Zustand

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';

export default Reactotron
  .configure({ name: 'Zustand App' })
  .useReactNative()
  .connect();
// store.ts
import { create } from 'zustand';
import Reactotron from './ReactotronConfig';

interface Store {
  count: number;
  increment: () => void;
}

export const useStore = create<Store>((set, get) => ({
  count: 0,
  increment: () => {
    const newCount = get().count + 1;

    Reactotron.display({
      name: 'ZUSTAND',
      value: { count: newCount },
      preview: `count: ${newCount}`,
    });

    set({ count: newCount });
  },
}));

Plugin Zustand Personalizado

// zustandPlugin.ts
import Reactotron from './ReactotronConfig';

export const zustandLogger = (config) => (set, get, api) =>
  config(
    (...args) => {
      const prevState = get();
      set(...args);
      const nextState = get();

      Reactotron.display({
        name: 'ZUSTAND',
        value: { prev: prevState, next: nextState },
        preview: 'State updated',
      });
    },
    get,
    api
  );

// Uso
const useStore = create(
  zustandLogger((set) => ({
    count: 0,
    increment: () => set((s) => ({ count: s.count + 1 })),
  }))
);

Integración con MobX

npm install reactotron-mst  # Para MobX-State-Tree
import Reactotron from 'reactotron-react-native';
import { mst } from 'reactotron-mst';

Reactotron
  .configure()
  .use(mst())
  .connect();

Logs Manuales

Para cualquier state manager:

function logStateChange(storeName, action, state) {
  Reactotron.display({
    name: storeName,
    value: state,
    preview: action,
    important: true,
  });
}

Ejercicio Práctico

Objetivo

Integrar Zustand con Reactotron usando middleware.

Pasos

  1. Crea un store de Zustand
  2. Implementa el middleware de logging
  3. Dispara acciones y observa en timeline
  4. Verifica que muestra estado anterior y nuevo
Ver solución 
import { create } from 'zustand';
import Reactotron from './ReactotronConfig';

const logMiddleware = (config) => (set, get, api) =>
  config(
    (partial, replace) => {
      const prevState = get();
      set(partial, replace);
      Reactotron.display({
        name: 'ZUSTAND',
        value: { prev: prevState, next: get() },
        preview: 'State changed',
      });
    },
    get,
    api
  );

const useCartStore = create(
  logMiddleware((set) => ({
    items: [],
    addItem: (item) =>
      set((state) => ({ items: [...state.items, item] })),
    clearCart: () => set({ items: [] }),
  }))
);

Criterios de Éxito

← Volver al listado de tecnologías