Question

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

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

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

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

但我的问题是......如何在磁通架构中完成这项工作？

我应该为此操作分派操作并添加中间件吗？或者直接在signUp action？

中调用该函数

Answer 1

有几次我必须为像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);
};

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”解释它。

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

2 个答案: