将 Firebase 与 React 和 Redux 结合使用

2020-04-09 08:00:00 · 飞浪

介绍 Firebase是一个极其有用的平台，可用于快速创建无服务器应用程序。除此之外，Firebase还与端到端系统一起使用，以解决多个生产级问题，例如配置管理和推送通知。Firebas

介绍

Firebase 是一个极其有用的平台，可用于快速创建无服务器应用程序。除此之外，Firebase 还与端到端系统一起使用，以解决多个生产级问题，例如配置管理和推送通知。Firebase 实时数据库是该平台提供的最受欢迎的服务之一。它为需要快速构建和扩展的 Web 应用程序提供了快速数据库和后端。

不幸的是，将 Firebase 数据库连接到 React 应用并不简单。Firebase 中的数据同步方式与 React 处理状态的方式集成在一起，这让人有些困惑。为了充分利用 Firebase，最好以一种与 React 的单向数据流模式相辅相成的方式进行集成。

在本指南中，我们将探索使用React Context实现的此类方法。我们使用的示例是流行的 React Todo 应用程序，其中使用 Redux 进行应用程序状态管理。如果您不熟悉它，则应首先阅读Redux 文档中的此示例。

创建 Firebase 项目

首先，使用Firebase 控制台创建一个 Firebase 项目。使用控制台应用程序可以很容易地完成设置。请按照以下步骤操作：

从控制台转到添加项目。
输入项目名称并继续。
您可以选择将 Google Analytics 纳入项目。现在选择退出。
设置完成后，您将被重定向到项目仪表板。转到项目设置。
在您的应用程序下，选择Web图标。
输入应用程序的名称，然后单击“注册应用程序”。
复制firebaseConfig变量下的配置详细信息。稍后您将需要它来设置应用与 Firebase 之间的通信。
按“继续到控制台”以完成 Web 应用程序注册。

现在设置已完成，您拥有所需的配置信息。

连接 React Firebase

有几种正确的方法可以将 Firebase 连接到您的 React 应用。在本指南中，您将探索基于 React Context 的方法。Firebase 在部署无服务器应用时提供一系列服务，包括实时数据库、Cloud Firestore、Firebase Storage（用于存储文件）等。您目前将只使用实时数据库。但您实施的连接方法也将有空间在以后使用上述任何服务。

注意：
关于 Firebase 实时数据库，需要记住的一个重要事实是，顾名思义，它会实时将数据更新推送到应用程序。这意味着，与在需要时提取信息的传统数据源不同，一旦您开始监听数据查询，Firebase 就会持续同步您的数据更新。例如，当您表示想要监听数据库中的所有 Todo 项时，您将持续了解数据库中 Todo 集合的任何更新。这是使用 WebSockets 实现的。（如果您需要 WebSockets 的介绍，本指南将为您提供深入的了解，但这对于继续阅读当前指南来说并不是必需的。）

为 Firebase 连接实现的 React Context 将具有以下功能：

它将在应用程序初始化时建立与 Firebase 的连接。
它将确保每个应用程序实例与 Firebase 只存在一个连接。
一旦作为提供程序注入到App中，它就可以在任何组件中使用。
它将把所有读/写操作连接到实时数据库。
它将直接与 Redux 集成。

使用npm install --save firebase或yarn add firebase将 Firebase 添加到你的 React 项目。

为了保持整洁，在src目录中创建一个新目录firebase并创建以下文件：

      // firebaseConfig.js
// Contains the config details of firebase, this should NOT be committed to your repo
// if the repo is public
// You could optionally use .env file to store these data

export default {
    apiKey: "********",
    authDomain: "********",
    databaseURL: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********"
};
    

上述所有详细信息均可在您设置 Firebase 项目时复制的配置中找到。如果您之前未存储它，您可以通过转到项目仪表板中的项目设置再次找到它。

      // firebase.js
// contains the Firebase context and provider

import React, { createContext, useEffect } from 'react'
import firebaseConfig from './firebaseConfig';
import app from 'firebase/app'
import 'firebase/database';
import { useDispatch } from 'react-redux';

import { todoActions } from '../state/todos';

// we create a React Context, for this to be accessible
// from a component later
const FirebaseContext = createContext(null)
export { FirebaseContext }

export default ({ children }) => {
    let firebase = {
        app: null,
        database: null
    }

    const dispatch = useDispatch();

    // check if firebase app has been initialized previously
    // if not, initialize with the config we saved earlier
    if (!app.apps.length) {
        app.initializeApp(firebaseConfig);
        firebase = {
            app: app,
            database: app.database(),

            api: {
                getTodos
            }
        }
    }

    // function to query Todos from the database and
    // fire a Redux action to update the items in real-time
    function getTodos(){
        firebase.database.ref('todos').on('value', (snapshot) => {
            const vals = snapshot.val();
            let _records = [];
            for(var key in vals){
                _records.push({
                    ...vals[key],
                    id: key
                });
            }
            // setTodos is a Redux action that would update the todo store
            // to the _records payload
            dispatch(setTodos(_records));
        })
    }

    return (
        <FirebaseContext.Provider value={firebase}>
            {children}
        </FirebaseContext.Provider>
    )
}
    

接下来，将 Firebase 提供程序添加到您的应用。请确保在添加时，它位于Redux 提供程序之后。如果您在之前添加它，它将无法访问useDispatch钩子。在此示例中，您将在index.js中定义提供程序，并将所有提供程序附加到App组件的顶部。

      // index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './state/store';
import { Provider } from 'react-redux'
import FirebaseProvider from './firebase/firebase'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <FirebaseProvider>
            <App />
        </FirebaseProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
    

现在您与 Firebase 的连接已完成。在应用初始化时，调用一次getTodos函数，Firebase 将在实时数据库和 Redux 存储之间创建同步。Todo 集合的每次新更新都将反映在 Redux 存储中。

      // App.js

import { FirebaseContext } from './firebase/firebase';

export default function App(props) {
    const { app, api } = useContext(FirebaseContext);
    // you can access todos from the Redux store
    const todos = useSelector(state => state.todo.todos);

    useEffect(( ) => {
        api.getTodos();
        }
    }, [])

    return (
        ...
    )
}
    

使用 React 编辑实时数据库

完成上述设置后，将数据写入和更新到 Firebase 数据库就轻而易举了。您可以直接从每个组件执行数据库更新，也可以通过 Firebase 上下文以更可控的方式进行交互。对于复杂的项目，建议使用后者，这样所有 Firebase 通信都集中在一个地方，而不是分散在多个组件中。

首先在 Firebase Context 中添加一个创建 Todo 的方法。

      // firebase.js

// ...
export default ({ children }) => {
    // ...

    if (!app.apps.length) {
        app.initializeApp(firebaseConfig);
        firebase = {
            app: app,
            database: app.database(),

            api: {
                getTodos,
                addTodo
            }
        }
    }

    // ...

    function addTodo(itemTitle){
        firebase.database.ref('todos').push().set({
            title: itemTitle
        })
        .then((doc) => {
            // nothing to do here since you already have a 
            // connection pulling updates to Todos
        })
        .catch((error) => {
            dispatch(todoActions.showError("Error adding Todo to database"));
			console.error(error);
		})
    }
}
// ...
    

然后，只需从创建 Todos 的组件调用api.addTodo("some title")即可调用addTodo函数。我们使用 Firebase 的推送功能来添加新的 Todo，因为它是创建列表中项目的推荐方式。您可以在Firebase 数据保存文档中阅读有关它的更多信息。

结论

Firebase 是一个用于快速构建无服务器应用的流行平台。有多种方法可以将 React 和 Redux 应用连接到您的 Firebase 项目。在本指南中，我们探索了一种可以在生产级应用中很好地扩展的方法。Firebase 实时数据库能够与 Redux 存储同步而不会导致意外问题，这是此方法的一个主要优点。最后，我们讨论了如何使用相同的界面来简化向 Firebase 数据库添加和更新记录的过程。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

将 Firebase 与 React 和 Redux 结合使用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// firebaseConfig.js // Contains the config details of firebase, this should NOT be committed to your repo // if the repo is public // You could optionally use .env file to store these data export default { apiKey: "********", authDomain: "********", databaseURL: "********", projectId: "********", storageBucket: "********", messagingSenderId: "********", appId: "********" };

// firebase.js // contains the Firebase context and provider import React, { createContext, useEffect } from 'react' import firebaseConfig from './firebaseConfig'; import app from 'firebase/app' import 'firebase/database'; import { useDispatch } from 'react-redux'; import { todoActions } from '../state/todos'; // we create a React Context, for this to be accessible // from a component later const FirebaseContext = createContext(null) export { FirebaseContext } export default ({ children }) => { let firebase = { app: null, database: null } const dispatch = useDispatch(); // check if firebase app has been initialized previously // if not, initialize with the config we saved earlier if (!app.apps.length) { app.initializeApp(firebaseConfig); firebase = { app: app, database: app.database(), api: { getTodos } } } // function to query Todos from the database and // fire a Redux action to update the items in real-time function getTodos(){ firebase.database.ref('todos').on('value', (snapshot) => { const vals = snapshot.val(); let _records = []; for(var key in vals){ _records.push({ ...vals[key], id: key }); } // setTodos is a Redux action that would update the todo store // to the _records payload dispatch(setTodos(_records)); }) } return ( <FirebaseContext.Provider value={firebase}> {children} </FirebaseContext.Provider> ) }

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import store from './state/store'; import { Provider } from 'react-redux' import FirebaseProvider from './firebase/firebase' ReactDOM.render( <React.StrictMode> <Provider store={store}> <FirebaseProvider> <App /> </FirebaseProvider> </Provider> </React.StrictMode>, document.getElementById('root') );

// App.js import { FirebaseContext } from './firebase/firebase'; export default function App(props) { const { app, api } = useContext(FirebaseContext); // you can access todos from the Redux store const todos = useSelector(state => state.todo.todos); useEffect(( ) => { api.getTodos(); } }, []) return ( ... ) }

// firebase.js // ... export default ({ children }) => { // ... if (!app.apps.length) { app.initializeApp(firebaseConfig); firebase = { app: app, database: app.database(), api: { getTodos, addTodo } } } // ... function addTodo(itemTitle){ firebase.database.ref('todos').push().set({ title: itemTitle }) .then((doc) => { // nothing to do here since you already have a // connection pulling updates to Todos }) .catch((error) => { dispatch(todoActions.showError("Error adding Todo to database")); console.error(error); }) } } // ...