在 Flux 架构中，您如何管理分析跟踪？

Question

假设我正在构建像 Airbnb 这样的单页应用程序。在此类应用程序中的一件好事是跟踪某人何时创建帐户。

对于跟踪部分，有很多服务可以提供帮助（google 分析、细分等）。

例如，要使用 react-ga 跟踪事件，您只需使用以下内容：

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

但我的问题是......这应该如何在通量架构中完成？

我应该分派一个动作并为此动作添加一个中间件吗？或者直接在 signUp 操作中调用该函数？

Answer 1

我可能会想到正在分派给 "singUpReducer" 的操作 "signUp"。就像：

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 将其从 "container" 映射到 "presentational" 组件。我在这里看不到任何使用中间件的意义，除非你想无论如何转换你的分派动作有效负载。我希望它对你有所帮助，即使我试图在 "Redux-way" 中解释它。

Answer 2

有几次我不得不为 Intercom 这样的服务编写非常相似的代码。我当时用的是 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);
};

在 Flux 架构中，您如何管理分析跟踪？

In Flux architecture, how do you manage analytics tracking?

javascript

analytics

reactjs

reactjs-flux

redux