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

【问题标题】：Reactjs: Direct Firebase connection vs Firebase Redux storeReactjs：直接 Firebase 连接与 Firebase Redux 商店
【发布时间】：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 实现来构建应用程序

【问题讨论】：

标签： reactjs firebase react-redux react-redux-firebase

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

【讨论】：