1. 前言
redux-beacon 是一个用于 Google Analytics 和 Mixpanel 等第三方分析工具及错误日志的 Redux 中间件。这个包提供了一种简单的方法来将事件数据发送到这些工具之一。这篇教程将介绍如何使用 redux-beacon 包。
2. 安装
要使用 redux-beacon 包，你需要先安装它的 npm 包，可以通过 npm install 命令来进行安装：
npm install --save redux-beacon
3. 快速上手
在这个例子中，我们将使用 Google Analytics 来跟踪用户登录事件。首先，我们需要创建一个事件触发器 analyticsEventsMap ，它将定义一个 loginSuccess 事件。我们将使用 createMiddleware 来创建 middleware 和 GoogleAnalyticsTagManager 实例来追踪这个事件。
-- -------------------- ---- -------
------ - ------------------------- - ---- ----------------------------------------
------ - ---------------- - ---- ---------------
------ - ------------ - ---- ------------
----- ------------------ - -
-------------- -- -- --
-------- --------
-------------- -------
----------- ----- ----- ----------
--
--
----- ------------ - ------------------------------------
-----------------------------接下来，我们需要把这个 middleware 加入到 Redux Store 配置中：
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(gaMiddleware));现在，我们已经成功地创建了一个使用 redux-beacon 包的中间件来跟踪使用者事件了。
4. 高级设置
当你使用 redux-beacon 包时，你可能需要自定义一些设置来满足你的需求。在这个部分中，我们将介绍如何自定义 redux-beacon 包的一些高级设置。
4.1 使用自定义触发器
我们可以使用 createMiddleware 函数来构建自定义触发器。下面是一个使用 customTrigger 的例子。
-- -------------------- ---- ------- -------- ------------------------ -------- - -------- ----- ---------- ----- ------ ----- - ----- --------- - - -------------- ------------- -- ----- ---------- - --------------------------- -----
4.2 手动调用事件
我们可以使用 sendEvent 函数来手动触发一个事件。下面是一个使用 sendEvent 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ---------------
-------- -------------- -
------ -
----- ---------------
--
-
-------------------------------
----- ----- - -
-------- --------
-------------- -------
----------- ----- ----- ----------
--
----- --------- - ----------------
---------------- ---------- -------------------4.3 使用自定义 handler
通过使用自定义处理程序函数，我们可以将你的事件发送到任何你想要的地方，而不仅仅是 Mixpanel 和 Google Analytics。这是通过将自定义处理程序数组传递给 Redux-Beacon 的配置选项来实现的，如下所示:
-- -------------------- ---- -------
----- ------- - -
------- --------
-------------- -
------------------- -
--------------------- -----------
-
-
--
--------------------------- ------- ---------4.4 使用 actionCreators
如果你使用的是 Redux 中间件而非 Redux-Saga，你可能希望使用 actionCreators 作为触发器列表中的事件。这可以通过 eventDefinitions 参数进行设置，如下所示:
-- -------------------- ---- -------
------ - -- ------- ---- ------------
------ - ---------------- - ---- ---------------
------ - ------------------------- - ---- ----------------------------------------
----- --------- - -
----------------------------------- -- -- --
-------- --------
-------------- -----------
------------ ---------
--
--
----- ---------------- - -
---------- -
----------- -- -- --
-
--
----- ------------ - --------------------------- ---------------------------- -
----------------
---5. 总结
以上就是本文的全部内容，希望能对你了解 redux-beacon 包有所帮助。使用 redux-beacon 包，你可以轻松地追踪 Redux 应用中特定事件的数据，并将它们发送到任何你想要的遥测工具中。同时，redux-beacon 包也提供了一些高级设置来进行进一步自定义，并能帮助你更好地理解数据的行为，以使你的应用更加优化和高效化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/redux-beacon