在 Flux 架构中,您如何管理分析跟踪?
Posted
技术标签:
【中文标题】在 Flux 架构中,您如何管理分析跟踪?【英文标题】:In Flux architecture, how do you manage analytics tracking? 【发布时间】:2018-10-15 09:17:36 【问题描述】:假设我正在构建一个像 Airbnb 这样的单页应用程序。在这样的应用程序中,一件好事是跟踪某人何时创建了一个帐户。
对于跟踪部分,有很多服务可以提供帮助(谷歌分析、细分等)。
例如,要使用 react-ga 跟踪事件,您只需使用以下命令:
ReactGA.event(
category: 'User',
action: 'Created an Account'
);
但我的问题是……这应该如何在通量架构中完成?
我应该分派一个动作并为此动作添加一个中间件吗?还是直接在 signUp
操作中调用该函数?
【问题讨论】:
【参考方案1】:我可能会想到被分派给“singUpReducer”的动作“signUp”。就像:
export function signUp(username)
return
type: SIGNUP,
username: username
;
reducer 可能是这样的:
export default function signUpReducer(state = null, action)
switch(action.type)
case SIGNUP:
return action.username;
default:
return state;
当然,您可以在特定组件中触发操作,或者通过 mapDispatchToProps 将其从“容器”映射到“展示”组件。 我在这里看不到使用中间件的任何意义,除非你想无论如何转换你的调度动作有效负载。 我希望它对你有所帮助,即使我试图以“Redux 方式”来解释它。
【讨论】:
【参考方案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 架构中,您如何管理分析跟踪?的主要内容,如果未能解决你的问题,请参考以下文章