Передача Создать элемент проходит вдоль дерева компонентов. - PullRequest
Новая
       18

Передача Создать элемент проходит вдоль дерева компонентов.

0 голосов
/ 03 октября 2019

У меня есть задача реализовать решение, которое отлично работает, интегрируя реагирование и микшпанель для отслеживания событий. После поиска множества решений я выбрал одно, которое, как мне показалось, могло бы вписаться в проект наилучшим образом. Вот что: https://avi.io/blog/2016/08/31/scalable-and-generic-mixpanel-tracking-for-react-redux-applications/

Мне нужно создать оболочку для всего моего дерева компонентов, чтобы я мог получить доступ ко всем компонентам трэка trackEvent.

Я создал оболочку для приложения следующим образом: 

  <MixpanelWrapper>
    <App />
  </MixpanelWrapper>

MixpanelWrapper.js: 

import { connect } from 'react-redux';
import { sendMixpanelEvent } from 'services/store/modules/mixpanel/mixpanel.actions.js';

const MIXPANEL = {
  EVENTNAME: 'data-mixpanel-eventname',
  PROPERTIES: 'data-mixpanel-properties',
};

const MixpanelWrapper = ({ children, track }) => {
  return React.Children.map(children, child => React.cloneElement(child, { trackEvent: track }));
};

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    track: e => {
      const target = e.target;
      const eventName = target.getAttribute(MIXPANEL.EVENTNAME);
      const eventAttributes = target.getAttribute(MIXPANEL.PROPERTIES);

      if (eventName && eventAttributes) {
        dispatch(sendMixpanelEvent(eventName, eventAttributes));
      }
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MixpanelWrapper);

Здесь я клонирую каждого потомка MixpanelWrapper и передаю ему событие track trackEvent. Но на этом у меня просто есть доступ к трэку trackEvent в файле приложения, а не ко всем другим компонентам.

Как мне заархивировать это решение? Есть идеи?

Спасибо!

...