2

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

4

3 回答 3

0

这是我实施的解决方案。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>)
    }                                                                 
}
于 2018-01-08T23:45:00.703 回答
0

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

请参阅此答案以供参考：

React-Redux-Firebase - 用另一个项目填充项目

于 2018-01-04T16:59:06.597 回答
0

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

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

于 2019-08-27T08:39:05.930 回答