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

时间:2018-01-03 19:35:04

标签: reactjs firebase react-redux react-redux-firebase

通过直接连接访问Firebase是否一个好主意,而不是通过Redux在商店中使用Firebase?

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

public partial class Mobiles_Details : System.Web.UI.Page
{

public string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
{

    if (!Page.IsPostBack)
    {

        try
        {
            Session["UserID"] = "100";
            //int ID = 102;
            int ID = Convert.ToInt32(Request.QueryString["ID"].ToString());
            Session["Product_ID"] = ID;

            if (Session["UserID"] == null || Session["UserID"].ToString() == string.Empty)
            {
                Response.Redirect("Login.aspx", false);
            }
            else
            {

                if (ID != null)
                {   

                    DataTable dt = Load_Items_ID(Convert.ToInt32(Session["UserID"].ToString()), ID);

                    lbl_Name.Text = dt.Rows[0]["Name"].ToString();
                    lbl_Price.Text = dt.Rows[0]["Price"].ToString();
                    lbl_Details.Text = dt.Rows[0]["Details"].ToString();
                    img_Product.ImageUrl = dt.Rows[0]["image"].ToString();

                }
            }
        }
        catch (Exception ex)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "alert('An Error has been occured ');" + ex.ToString(), true);

        }
    }

}

public DataTable Load_Items_ID(int UserID, int ID)
{
    DataTable Returned_Value = new DataTable();

    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM  Products  where  UserID= " + UserID + " and  Status='False'  and  ID =" + ID))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(Returned_Value);
                }
            }
        }
    }

    return Returned_Value;
}
}

使用直接firebase连接构建应用程序是否可行?或者我应该使用Firebase / Redux实现构建应用程序,例如react-redux-firebase(https://github.com/prescottprue/react-redux-firebase

3 个答案:

答案 0 :(得分:0)

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

请参阅此答案以供参考:

React-Redux-Firebase - populate item with another item

答案 1 :(得分:0)

这是我实施的解决方案。 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>)
    }                                                                 
}

答案 2 :(得分:0)

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

React只是关于简单的功能。这意味着每个功能应仅负责单个任务。您的应用程序应由纯函数组成,以便您可以在应用程序中的任何位置轻松重用此函数。换句话说,功能不应该更改功能本身以外的任何内容。功能越简单,可重复使用性越强。