Ce plugin vous permet de capturer les actions/l’état de Redux et de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. C’est très utile pour comprendre et corriger les problèmes.

npm i @openreplay/tracker-redux --save

Initialisez le tracker, puis placez le middleware généré dans votre chaîne 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) 
);

Suivez l’exemple ci-dessous si votre application est en SSR. Assurez-vous que tracker.start() est appelé une fois l’application démarrée (dans useEffect ou 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
}

Vous pouvez personnaliser le comportement du middleware à l’aide d’options afin d’assainir vos données.

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 vous recherchez un exemple concret d’utilisation de ce plugin pour capturer les changements d’état dans vos relectures de sessions, consultez notre tutoriel détaillé ici.

Vous rencontrez des difficultés pour configurer ce plugin ? Rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.