前言
如果你正在开发一个使用 Firebase 数据库的前端应用，那么你可能会遇到一些麻烦。Firebase 的 API 可能不那么直观，而且处理 Firebase 的状态可能会变得很困难。为了解决这些问题，你可以使用第三方库来简化开发，其中 @joshforisha/cycle-firebase 就是一个很不错的选择。它提供了一套简单易懂的 API，让你可以更方便的与 Firebase 交互。
安装
你可以使用以下命令安装 @joshforisha/cycle-firebase：
npm install @joshforisha/cycle-firebase
除此之外，你还需要安装 Firebase 的 JavaScript SDK。你可以通过以下命令安装 Firebase：
npm install firebase
使用
在你的应用中使用 @joshforisha/cycle-firebase 有两个步骤：首先，你需要创建一个 Firebase 实例；然后，你需要定义一个数据库源，并将其与应用中的其他流进行连接。
创建 Firebase 实例
在你的应用中，你需要创建一个 Firebase 实例。这个实例将提供你需要使用的各种功能。为此，你需要在你的应用中引入 Firebase SDK。
-- -------------------- ---- ------- ------ -------- ---- ---------- ----- ------ - - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ -------------------------- - ------------------------------
上面这个代码片段中的 config 对象中，包含了你在 Firebase 控制台中创建的应用相关的各种信息。你需要将这些信息填写成员自己应用的相关信息。如果你还没有创建 Firebase 应用，你可以在这里创建一个 Firebase 应用。
定义数据库源
定义数据库源是 @joshforisha/cycle-firebase 中最关键的部分。你可以使用 makeFirebaseDriver 来定义数据库源。这个函数需要一个 Firebase 实例作为参数，并返回一个驱动程序函数。这个驱动程序函数可以用来监听和修改 Firebase 数据库中的数据。
-- -------------------- ---- -------
------ - --- - ---- ------------
------ - ------------- - ---- ------------
------ - ------------------ - ---- -----------------------------
-------- ------------- -
----- --------- - ------------------------------------
----- ----- - ------------------ --
------------ -
------------ -------
--------------------
--
-
------ -
---- -----
-
-
----- ------- - -
---- ----------------------
--------- ----------------------------
-
--------- --------这个示例代码中的 makeFirebaseDriver 函数需要一个 Firebase 实例作为参数，并返回一个驱动程序函数。驱动程序函数接收一个对象作为参数，其中可以包含 database、auth 和 functions 三个属性。这个对象也可以被映射为一个数据流，从而使得我们可以在整个应用中使用这些 Firebase API。
在这个示例代码中，我们定义了一个 database$ 数据流，它通过监听根路径（/）中的所有数据，并将它们在页面中显示出来。
监听和修改数据
一旦你定义好了数据库源，你就可以使用它来监听和修改 Firebase 数据库了。
监听数据
要监听数据，你只需要在 database 属性后面加上相应的路径，就可以完成对该路径下数据的监听。
const database$ = sources.Firebase.database().ref('/path/to/data')上面这个例子中，我们监听 /path/to/data 这个路径下的数据。你可以使用 onValue 方法来监听该路径下的所有数据，或者使用其他监听方法来监听该路径下的特定部分数据。
database$.onValue(snapshot => {
console.log(snapshot.val())
})上面这个例子中，我们使用 onValue 方法监听 /path/to/data 这个路径下的所有数据，并在控制台中输出它们的值。
修改数据
如果你想修改 Firebase 数据库中的数据，你可以使用 set、update 或 push 方法。你可以在某个路径下使用 set 和 update 方法来修改数据，而 push 方法可以用来在数据库中创建新的数据节点。
-- -------------------- ---- ------- --------------------------- --------------------- ------ ---- ----- -- --------------------------- --------------------- --------- ---- ----- -- --------------------------- --------------------- ------- ----- ------- ---- -- --
上面这个例子中，我们分别使用 set、update 和 push 方法来修改 /path/to/data 这个路径下的数据。在 set 和 update 方法中，我们提供了一个对象，它将作为该路径下的新数据；而在 push 方法中，我们提供了一个对象，它将被添加到 /path/to/data 这个路径下的现有数据列表中。
结论
@joshforisha/cycle-firebase 是一个非常方便的工具，可以简化你与 Firebase 数据库交互的过程。通过它，你可以轻松地监听和修改 Firebase 中存储的数据。但是，除了此处介绍的方法之外，它还有更多的 API，你可以在官方文档中查看详情，来获得更有效的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e244354