Reactjs：直接Firebase连接与Firebase Redux存储

通过直接连接访问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直接连接构建应用程序是否可行？或者我应该使用Firebase/Redux实现来构建应用程序，比如react-Redux Firebase（）

Redux使用一个存储，所有东西都经过它。您可以将上述代码用于一个组件，而不在其他组件之间共享。您可以使用justreact，但不能使用Redux。在这里，您没有使用Redux的功能，而是使用了经典的React。 在Redux中，数据的建模方式可以让您控制数据的来源以及如何在不同组件之间共享数据。 我建议将Redux作为一个整体使用，使操作处理Firebase并将数据发送到组件

请参阅此答案以供参考：

---

以下是我实施的解决方案。Firebase处理我在下面代码中需要的所有内容。它利用了：

文件：'./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>)
    }                                                                 
}

import React，{Component}来自'React'；
从“../firebasetools”导入{Orders}；
类服务扩展组件{
构造函数（）{
超级（）；
此.state={
订单：{}
}
}
componentDidMount（）{
命令。获取（）
。然后（（订单）=>{
this.setState（{orders}）
})
}
render（）{
返回(
{this.state.orders}
)
}                                                                 
}

我们不希望我们的组件与firebase通信。您的组件甚至不应该知道firebase是我们的数据库选择。组件应该完全不知道数据从何而来，也不知道数据真正要去哪里。组件应该只关注信息的表示和基本的用户交互

---

React是关于简单函数的。这意味着每个职能部门只负责一项任务。您的应用程序应该由纯函数组成，这样您就可以在应用程序中的任何地方轻松地重用此类函数。换句话说，一个函数不应该改变任何与函数本身无关的东西。函数越简单，它的可重用性就越高。

我知道这里没有使用Redux。我只是想知道使用Firebase直接引用编程应用程序的可行性。是什么让Redux值得花时间呢？这似乎需要学习很多东西（当实现这个解决方案非常快时）。我可以创建自己的最小流量实现；我对那个方向很好奇。想法？@user3191886您需要知道Redux的功能以及创建它的原因。当用React构建一个简单的应用程序时，它是很好的，直到你达到一个对应用程序状态有大量使用的程度为止。它变得越来越复杂。Redux在这里很有帮助，扩展应用程序变得更容易。如果你正在做一个简单的应用程序，那么只需将ReactJS与Firebase一起使用就可以了。