Этот плагин позволяет захватывать действия/состояние Redux и просматривать их позже при воспроизведении записей сессий. Это очень полезно для понимания и устранения проблем.

npm i @openreplay/tracker-redux --save

Инициализируйте трекер, а затем добавьте сгенерированный middleware в вашу цепочку 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) 
);

Следуйте приведённому ниже примеру, если ваше приложение использует SSR. Убедитесь, что tracker.start() вызывается после запуска приложения (в useEffect или 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
}

Вы можете настроить поведение middleware с помощью опций для очистки ваших данных.

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;
  },
})

Если вы ищете практический пример использования этого плагина для захвата изменений состояния в записях ваших сессий, ознакомьтесь с нашим подробным руководством здесь.

Возникли трудности с настройкой этого плагина? Присоединяйтесь к нашему Slack или посетите наш Форум и получите помощь от нашего сообщества.