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

Question

通过直接连接访问 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 实现来构建应用程序

Answer 1

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

参考这个答案：

React-Redux-Firebase - populate item with another item

Answer 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>)
    }                                                                 
}

Answer 3

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

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

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

Reactjs: Direct Firebase connection vs Firebase Redux store

firebase

reactjs

react-redux

react-redux-firebase