تتيح لك هذه الإضافة التقاط إجراءات/حالة Redux وفحصها لاحقًا أثناء إعادة تشغيل تسجيلات الجلسات. وهذا مفيد للغاية لفهم المشكلات وإصلاحها.

npm i @openreplay/tracker-redux --save

قم بتهيئة المتعقّب (tracker) ثم ضع البرمجية الوسيطة (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 الخاص بنا أو زيارة المنتدى والحصول على المساعدة من مجتمعنا.