前言
对于前端开发人员来说，如何清晰地记录和分析用户的行为数据是至关重要的。segment.io 是一个提供跨平台用户行为跟踪和管理的工具，可以将数据发送到所需的分析工具（如 Google Analytics，Mixpanel等）。这里我们将介绍一个针对 Redux 应用程序的 segment.io 封装包 redux-segmentio，用于方便地在 Redux 应用程序中记录用户行为。
安装
你可以通过 npm 来安装 redux-segmentio。
npm install redux-segmentio --save
初始化
可在应用程序的入口文件中初始化 redux-segmentio。
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ------------ ---- ---------------
------ ----- ---- --------------
------ --------- ---- ------------------
----- -------- - ----------------- ----- ------------ --------- --------------- ---
----- ------------------------- - ----------------
------
---------------
-----------
-- -------------
--
--------------
----- ----- - -----------------------------------配置
你需要在初始化时提供配置信息，包括您的 segment.io Write Key 和其他设置。
segmentio({
WRITE_KEY: 'YOUR-WRITE-KEY-HERE',
// ..,
// options
})其中，WRITE_KEY 是你 segment.io 项目的 write key。你可以在 dashboard.segment.com 上找到它。
除了 WRITE_KEY，还有其他可用的选项：
debug: Boolean是否打印详细的日志信息。默认为 false。methods: Array要记录的用户事件的 actions 列表。默认为 ['TRACK']。transform: Function必须为函数，用于记录每个事件的详细信息。默认为一个标准方法。
使用
在你的 Redux 应用程序的 actions 中，你可以使用动作类型（如 ADD_TODO），然后 Redux-SegmentIO 将在发送事件的时候将其转换为 Segment 常规事件。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
----- ------- - ------ -- -
------ -
----- ---------
-----
-------- -
------ ----- -------
----------- -
-----
---------- --- -------
--
--
-
--上述代码将添加一个 ToDo，并使用 Todo Added 事件向 segment.io 发送相关数据，包括：用户ID、事件名称、事件属性、事件时间等信息。
示例
下面的代码提供一个包含以上内容的完整示例。
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ------------ ---- ---------------
------ ----- ---- --------------
------ --------- ---- ------------------
----- -------- - -----------
----- ----- - --------
----- ----------- - ------ - --- ------- -- -
-- ------------ --- --------- -
------ ---------- -
----- ------------
---------- -----
---
-
------ ------
--
----- --------------- - ------ - --- ------- -- -
------ ------------- -
---- ------
---------------------- ----------------------------
------ ------
--------
------ ------
-
--
----- ------- - ------ -- -
------ -
----- ---------
-----
-------- -
------ ----- -------
----------- -
-----
---------- --- -------
--
--
-
--
----- -------- - ----------------- ----- ------------ --------- --------------- ---
----- ------------------------- - ----------------
------
-----------
---------- ----------------------
------ -----
-------- ----------
---------- ----------
---
---------------
--------------
----- ----- - -----------------------------------
----------------------------- -------------在上述示例中，我们使用重要的 Redux 库函数（createStore、applyMiddleware、combineReducers）、logger 和我们的新 SegmentIO Redux 中间件。我们将 segment.io WRITE KEY 设置为 YOUR-WRITE-KEY-HERE，方法选项设置为 TRACK，并且打开详细的调试信息。然后使用 Action 的组成来包含 SegmentIO 信息。最后，使用 createStoreWithMiddleware 和 store.dispatch 分别创建和使用 reducer 和 addTodo 命令来触发到我们的 segment.io 服务。
结论
Redux-SegmentIO 是一个很好的资源库来记录用户行为并将其发送到 segment.io，这些信息可以用于进一步分析。快速上手 Redux-SegmentIO 库可以很容易集成到你已有的 Redux 应用程序中，并记录特定行为的数据。 然后你可以使用它制定有趣的数据点以及有用的信息来可视化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8af5