简介
React-Redux Firebase 是一个为了方便 React 使用 Firebase 的工具库，它是一个可以让你在 React 应用中快速使用 Firebase 的 npm 包。本教程讲解了如何使用 npm 包 @justin/react-redux-firebase 来完美使用 Firebase，并介绍了如何快速集成该库到 React 中。
准备工作
在开始前确保您已经正确安装了以下环境：
- Node.js & npm
- React
- Firebase
安装
在 React 项目中使用 npm 安装 @justin/react-redux-firebase：
npm install --save @justin/react-redux-firebase
集成
在你的代码中导入 redux-firebase：
import { ReactReduxFirebaseProvider } from '@justin/react-redux-firebase'然后创建一个 firebase 实例并将其传递给 ReactReduxFirebaseProvider：
-- -------------------- ---- -------
------ -------- ---- --------------
------ ---------------
------ -------------------
-- -------- ----
----- -------------- - -
-- ---- --
-
-- --- -------- --
--------------------------------------
-- -- -------------------------- --
----- -------- - -
---------
------- ---
--------- ---------------
------------------ -----
-
-- - -------------------------- --------
----------------
--------- --------------
--------------------------- --------------
---- --
-----------------------------
------------
-------------------------------
-这样就完成了整个 redux-firebase 的集成。
基本使用
连接 Firestore
要与 Firestore 连接，创建一个 firestoreConnect 高阶组件并使用 compose 函数将其绑定到你的组件上：
-- -------------------- ---- ------- ------ - ------- - ---- ------- ------ - ------- - ---- ------------- ------ - ---------------- - ---- ---------------------- -- - ------ -- ------ ------- -------- ------------------------- ------------------- ----------- ------- --- --------
监听实时更新
-- -------------------- ---- -------
------ - ------- - ---- -------
------ - ------- - ---- -------------
------ - ---------------- - ---- ----------------------
----- --------------- - ----- -- -
------------------
------ -
------ ----------------------------- -- --
-
-
------ ------- --------
-------------------------
------------------- ----------- ------- ---
--------添加新条目
-- -------------------- ---- -------
------ - ------- - ---- -------
------ - ------- - ---- -------------
------ - ---------------- - ---- ----------------------
----- ------------------ - -------- -- --
-------- ---- -- -----------------------------
--
----- --------------- - ----- -- -
-------------------
-
------ ----------------------------- -- --
-
-
------ ------- --------
--------
----------------
------------------
--
------------------- ----------- ------- ---
--------完整示例
这里是一个基于 React 和 Firestore 的简单 Todo 应用，你可以使用它来查看如何完美使用 @justin/react-redux-firebase。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - ------------- - ---- -----------
------ - ------- - ---- -------
------ - ---------------- - ---- ----------------------
----- ----- ------- --------- -
----- - -
----- --
-
------------ - ----- -- -
--------------- ----- ------------------ --
-
------------ - ----- -- -
----------------------
--------------------
------ ----------------
--------- -----
--
--------------- ----- -- --
-
-------- -
--- - ----- - - ----------
------ -
-----
----- -----------------------------
------
-----------
----------------- ---- ---- --------
-----------------------
----------------------------
--
------- ----------------- -------------
-------
----
--------------- -- -
--- --------------
------
---------------
-----------------------
------------ -- ---------------------- ------
--
------------
-----
---
-----
------
-
-
-
----- ------------------ - -------- -- --
-------- ---- -- -----------------------------
--
----- --------------- - ----- -- --
------ ----------------------------- -- --
--
------ ------- --------
--------
----------------
------------------
--
------------------- ----------- ------- ---
--------总结
现在你已经了解了如何使用npm 包 @justin/react-redux-firebase 来使用 Firebase。本教程旨在帮助初学者了解如何更好地使用 Firebase 并使您在使用 Firebase API 时更加得心应手。在你的应用程序中，你可以使用 Firebase 实时数据库、身份验证、存储和 Firestore 等所有 Firebase 服务。感谢您使用我们的 npm 包!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1a81e8991b448dab05