简介
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:
--- ------- ------ ----------------------------
集成
在你的代码中导入 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