在前端开发中，使用 Redux 进行状态管理已经成为一种非常常见的技术选择。而 reduxfire 是一个用于将 Firebase 实时数据库与 Redux 集成的 npm 包，它可以使我们更加方便地管理状态，并且允许我们在实时数据库上实时监听数据更改。
安装
安装 reduxfire 可以通过使用 npm 安装它。
npm install reduxfire
需要注意的是，它是建立在 Redux 和 Firebase 实时数据库之上的，因此在安装 reduxfire 之前，我们需要先安装这两个依赖：
npm install redux firebase
配置
在我们使用 reduxfire 前，需要在我们的 Redux 应用程序中配置 Firebase 实例：
-- -------------------- ---- ------- ----- -------------- - - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ --------------------------- ------ ------------- -- ---------------------------------------
这是我们 Firebase 配置对象的模板，填写真实的信息和应用程序的 Firebase 配置变量。
基本使用
现在我们已经准备好了开始使用 reduxfire。我们需要定义一个 Redux action，以便 reduxfire 可以在 Firebase 实时数据库中检索数据。
-- -------------------- ---- -------
------ - ----------------------- - ---- ------------------
------ - -------------- - ---- ------------------
------ -------- ---- ---------------
----- ----------- - --------------------------------
----- ------------ - ---
----- ----------- - -----------------
-- ---- -------- ----
---
----- ----------------------- - --------
-------------------------
----------------------------
---------------
----- ----- - ------------------------------------ --------------
----- -------- - -
---------
------- ---
--------- ---------------
-----------------------
--
----------------
--------- --------------
--------------------------- --------------
---- --
-----------------------------
------------
-----------
--这里我们首先从 redux-firestore 包中导入两个函数，createFirestoreInstance 和 reduxFirestore。然后，我们通过 firebase 导入 firebase SDK。然后我们将 createStoreWithFirebase 定义为一个将 reduxFirestore 和 reactReduxFirebase 组合起来的高阶函数。
操作数据
现在我们已经准备好检索我们的 Firebase 实时数据库中的数据了。要检索数据，我们称之为一个 thunk（一个异步 Redux 函数）。Thunk 可以在 Redux 的 action 中被调用，并返回一个函数，该函数将负责与 Firebase 实时数据库进行通信。
-- -------------------- ---- -------
------ -------- ---- ---------------
------ - ---------------- - ---- ------------------
------ -------------- ---- ------------------
----- ------------- - -- -- ----- ---------- --------- - ------------ -- -- -
----- ------------- - --------------------------------------
--- -
----- -------- - ----- --------------------
----------
----- -------------------
-------- ----------------------- -- -----------
---
- ----- ------- -
---------------------
-
--在这个例子中，我们使用 reduxfire 提供的 getFirestore 方法来访问 firestore 实例，然后使用 collection 方法获取我们所需的集合。接下来，我们使用 get 方法来检索数据，并将返回的数据作为一个数组分发到 Redux。
实时监听数据
我们使用 reduxfire 还可以让我们在 Firebase 实时数据库上实时监听数据更改。我们可以使用 reduxfire 的 listenTo 方法来完成这个操作。
-- -------------------- ---- -------
------ -------- ---- ---------------
------ - ---------------- - ---- ------------------
------ -------------- ---- ------------------
----- ---------------- - -- -- ----- ---------- --------- - ------------ -- -- -
----- ----------- - --------------------------------------
--------------------------------- -- -
-------------------------------------- -- -
-- ------------ --- -------- -
----------
----- ----------------
-------- -----------------
---
-
-- ------------ --- ----------- -
----------
----- -------------------
-------- -----------------
---
-
-- ------------ --- ---------- -
----------
----- ------------------
-------- -----------------
---
-
---
---
--在这个例子中，我们使用了 onSnapshot 方法来通过实时监听在 Firebase 实时数据库上的数据变化。然后，我们使用 docChanges 方法来检查数据的变化类型，并将它们分发到 Redux Store 中。
总结
习惯使用 Firebase 实时数据库作为数据源，并将 Redux 用于状态管理，那么 reduxfire 可以成为你的好帮手。在本文中，我们介绍了其安装和配置方法，并且在示例代码中演示了如何使用 reduxfire 来检索数据和实时监听数据更改。希望这篇文章有助于你更深入了解 reduxfire，并在实际项目中运用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d98