Este plugin te permite capturar las acciones/el estado de Redux e inspeccionarlos más tarde al reproducir las grabaciones de sesiones. Esto resulta muy útil para comprender y solucionar problemas.

npm i @openreplay/tracker-redux --save

Inicializa el tracker y luego coloca el middleware generado en tu cadena de Redux.

import { applyMiddleware, createStore } from 'redux';
import trackerRedux from '@openreplay/tracker-redux';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
tracker.start();
const openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

//...
const store = createStore(
  reducer,
  applyMiddleware(openReplayMiddleware) 
);

Sigue el ejemplo a continuación si tu aplicación es SSR. Asegúrate de que el tracker se ejecute una vez que la aplicación esté en el entorno del navegador.

'use client'
import { applyMiddleware, createStore } from 'redux';
import trackerRedux from '@openreplay/tracker-redux/cjs';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

const openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

const store = createStore( // You can define/use it anywhere in response handlers
  reducer,
  applyMiddleware(openReplayMiddleware)
);

//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
  //... Use store here
}

Puedes personalizar el comportamiento del middleware con opciones para sanear tus datos.

trackerRedux({
  actionFilter: action => action.type !== 'DRAW', // only actions which pass this test will be recorded
  actionTransformer: action => action.type === 'LOGIN' ? null : action,
  actionType: action => action.type // action type for search, that's the default one
  stateTransformer: state => {
    const { jwt, ..._state } = state;
    return _state;
  },
})

Si buscas un ejemplo práctico de cómo usar este plugin para capturar los cambios de estado en tus reproducciones de sesiones, consulta nuestro tutorial detallado aquí.

¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.