Reactjs：直接 Firebase 连接与 Firebase Redux 商店

Posted 2023-02-22

【中文标题】Reactjs：直接 Firebase 连接与 Firebase Redux 商店

【英文标题】：Reactjs: Direct Firebase connection vs Firebase Redux store

【发布时间】：2018-06-13 12:28:20

【问题描述】：

通过直接连接访问 Firebase 与通过 Redux 在商店中使用 Firebase 是一个好主意吗？

我在这里有一些示例代码来展示我如何实现直接的 firebase 连接并使用它来查询组件中的数据：

import firebase from './src/firebase.conn';
class App extends React.Component 

    constructor()
        super();

        this.state = 
            orders: []
        ;

        this.getOrders = this.getOrders.bind(this);
    

    componentDidMount() 
        this.getOrders();
    

    async getOrders() 
        try 
            let orders = await (await firebase.database().ref('orders)).val();

            this.setState(orders)
         catch (e) 
            console.error(e)
        
    

使用直接的 firebase 连接构建应用是否可行？或者我应该使用像 react-redux-firebase (https://github.com/prescottprue/react-redux-firebase) 这样的 Firebase/Redux 实现来构建应用程序

【参考方案1】：

Redux 使用 1 个 Store，一切都通过它。您可以将上述代码用于一个组件，而不是在其他组件之间共享。你可以只使用 React，但不能使用 Redux。在这里，您没有使用 Redux 的强大功能，而是使用了经典的 React。 在 Redux 中，您的数据以某种方式建模，您可以控制数据的来源以及如何在不同组件之间共享数据。 我建议整体使用 Redux，让 Actions 处理 Firebase 并将数据分派到您的组件。

请参阅此答案以供参考：

React-Redux-Firebase - populate item with another item

【讨论】：

我知道我在这里没有使用 Redux。我只想知道使用直接 Firebase 参考编程应用程序的可行性。是什么让 Redux 值得花时间？似乎需要大量学习（而实施此解决方案非常快）。我可以创建自己的最小 Flux 实现；我很好奇这个方向。想法？

@user3191886 你需要知道 Redux 做了什么以及为什么创建它。当使用 React 构建一个简单的应用程序时，它很好，直到你对应用程序的状态有很多用途。它变得越来越复杂。 Redux 在这里提供了帮助，扩展您的应用程序变得更容易。如果您正在做一个简单的应用程序，那么只需将 ReactJS 与 Firebase 一起使用就可以了。

【参考方案2】：

这是我实施的解决方案。 Firebase 在下面的代码中处理我需要的所有内容。它利用Singleton Creational Pattern:

文件：'./firebasetools/index.js'：

import firebase from '../firebase'; 

class OrdersClass 
    constructor () 

    get () 
        return firebase.database().ref('orders').once('value')
        .then((snapshot)=>
            return snapshot.val();
        )
                                                                         
                                                                 
const OrdersClass = new OrdersClass()                            
export const Orders = OrdersClass;

文件：'./components/Example.js'：

import React,  Component  from 'react';                        
import  Orders  from '../firebasetools';

class Services extends Component 
    constructor() 
        super();

        this.state = 
            orders: 
        
    

    componentDidMount()

        Orders.get()
        .then((orders) => 
            this.setState(orders)
        )
    

    render() 
        return (<div>
            this.state.orders
        </div>)
                                                                     

【参考方案3】：

我们不希望我们的组件与 firebase 通信。您的组件甚至不应该知道 firebase 是我们的数据库选择。组件应该完全不知道数据的来源和真正的去向。组件应该只关注信息的呈现和基本的用户交互。

React 是关于简单函数的。这意味着每个功能应该只负责一个任务。您的应用程序应该由纯函数组成，以便您可以在应用程序的任何位置轻松重用此类函数。换句话说，一个函数不应该改变任何不是函数本身本地的东西。函数越简单，复用性越高。