В архитектуре Flux как вы управляете отслеживанием аналитики?

Question

Допустим, я создаю одностраничное приложение, такое как Airbnb. В таком приложении было бы неплохо отслеживать, когда кто-то создает учетную запись.

Что касается отслеживания, существует множество служб, которые могут помочь (Google Analytics, сегмент и т. Д.).

Например, чтобы отследить событие с помощью реаги-га , вы можете просто использовать следующее:

ReactGA.event({
  category: 'User',
  action: 'Created an Account'
});

Но мой вопрос ... как это сделать в архитектуре потока?

Должен ли я отправлять действие и добавлять промежуточное программное обеспечение для этого действия? Или просто вызовите эту функцию непосредственно внутри signUp action?

Answer 1

Несколько раз мне приходилось кодировать очень похожие вещи для таких услуг, как Интерком . Я использовал Redux в то время. В управляемой событиями архитектуре, которой являются приложения на основе Redux, вы можете сделать это очень привлекательным способом, просто используя промежуточное ПО.

В моем случае я заметил, что у меня уже есть все необходимые действия, и все, что мне нужно, это просто отправить запрос аналитикам после того, как какое-то действие было инициировано.

Примерно так:

function sendIntercomRequest(action) {
  // send a request to analytic tool here
}

const intercomMiddreware = store => next => action => {
  switch (action.type) {
    // take required events
    case actionTypes.SIGN_IN_SUCCESS:
    case actionTypes.SIGN_OUT_SUCCESS:
      sendIntercomRequest(action.type);
      break;
  }

  return next(action);
};

Answer 2

Я мог бы подумать о действии "signUp", которое отправляется "singUpReducer". Прямо как:

export function signUp(username){
    return {
            type: SIGNUP,
            username: username
    };
}

И редуктор может выглядеть так:

export default function signUpReducer(state = null, action){
    switch(action.type){
    case SIGNUP:
        return action.username;
    default:
       return state;
   }
}

Конечно, вы запускаете действие в вашем конкретном компоненте или отображаете его из «контейнера» через mapDispatchToProps в «презентационный» компонент. Я не вижу здесь никакого смысла в использовании промежуточного программного обеспечения, за исключением того, что вы все равно хотите изменить полезную нагрузку отправленных действий. Я надеюсь, что это помогло вам, даже когда я попытался объяснить это в «Redux-way».