Este plugin te permite capturar las acciones/el estado de Redux e inspeccionarlos más adelante mientras reproduces 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 OpenReplay from '@openreplay/tracker';
import trackerRedux from '@openreplay/tracker-redux';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start();
const openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

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

Sigue el ejemplo de abajo si tu aplicación es SSR. Asegúrate de que tracker.start() se llame una vez que la aplicación se haya iniciado (en useEffect o componentDidMount).

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

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
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.