介绍
在 React 应用程序中使用 Firebase 和 Redux 是非常流行的方式，这样就可以更好地管理数据并实现动态 UI。react-redux-firebase-interwebs 是一个 npm 包，可以使在 React 应用程序中使用 Firebase 和 Redux 变得更加简单。
在本教程中，我们将看到如何将此 npm 包添加到我们的 React 应用程序中，以及如何使用它来管理应用程序的数据。
安装
我们首先需要创建一个新的 React 应用程序。可以使用
create-react-app快速创建一个新的应用程序：npx create-react-app my-app
2. 接下来，我们需要在项目目录下安装 `react-redux-firebase-interwebs`： ```bash npm install react-redux-firebase-interwebs --save
注意： 请确保已经安装了 Firebase、React 和 Redux，以及他们各自的 npm 包。如果您还没有安装，请执行以下操作：
npm install firebase react redux react-redux --save
要使用
react-redux-firebase-interwebs，我们需要使用redux-thunk中间件。安装redux-thunk：npm install redux-thunk --save
配置
接下来，我们需要配置我们的应用程序以使用 Firebase 和 Redux。我们需要编辑 src/index.js 文件。在末尾添加以下代码：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ -------- ---- ---------------
------ --------------------
------ ----------------
------ ----------- ---- -------------
-- -- --------
----- -------------- - -
------- ---------------
----------- -------------------
------------ --------------------
---------- ------------------
-------------- ----------------------
------------------ -----------------
------ --------------
--
---------------------------------------
-- -- ----- -----
----- ---------------- - ------------------------------------------- -- --------
----- ----- - ------------------------ ------------------------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--请注意，此处需要将您的 Firebase 配置添加到代码中。您可以在 Firebase 控制面板中找到这些值。
添加数据
现在，我们可以将数据添加到我们的应用程序中。react-redux-firebase-interwebs 提供了 FirebaseConnect 和 FirebaseDocument 组件来实现此操作。
我们将首先添加一个列表，以便查看我们在 Firebase 中添加的数据。我们将使用 FirebaseConnect 组件。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------------
----- --- - -- -- -
-----
------ --------
---------------- -------------
--- ----- -- -- -
----
------ --
--------------------------- -- -
--- ---------
----------------
-----
---
-----
--
------------------
------
--在这里，我们将从 Firebase 中获取路径为 items 的数据，并将它们呈现为一个列表。
接下来，我们将添加一个表单，以便将新数据添加到 Firebase 中。我们将使用 FirebaseDocument 组件。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ---------------- ---------------- - ---- ---------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
----- ------------ - --- -- -
-------------------
-- -------------- -
-------
-
-- - -------- ------
--------
-----------
-------------
------- ---- --
-------- -- -------------
--
------ -
-----
------ --------
---------------- -------------
--- ----- -- -- -
----
------ --
--------------------------- -- -
--- ---------
----------------
-----
---
-----
--
------------------
----- ------------------------
------ ----------- ------------ ------------- -- ------------------------ --
------- ----------------- -------------
-------
----------------- ---------------------
--- ----- -- -- -
--------- ------ -- ----------------
--
-------------------
------
--
--这里我们使用了 useState 来跟踪表单输入。我们还添加了一个 handleSubmit 函数，该函数会将新条目添加到 Firebase 中。
请注意，我们还使用了 FirebaseDocument 组件来获取一个名为 user123 的用户的名称。在这里，我们将直接访问文档。如果文档不存在，则不会呈现子元素。
结论
现在，您已经了解了如何使用 react-redux-firebase-interwebs 包来管理应用程序中的 Firebase 数据。这个 npm 包极大地简化了 React 应用程序中使用 Firebase 和 Redux 的过程，而不会破坏应用程序的数据流。在您的下一个项目中，您可以尝试使用此工具，提高您的开发效率！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590881e8991b448d668b