Reactjs: Direct Firebase connection vs Firebase Redux store

Question

Is it a good idea to access Firebase via a direct connection vs utilising Firebase in a store via Redux?

I have some example code here to show how I implemented a direct firebase connection and used it to query data in a Component:

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

Is it feasible to build an app with a direct firebase connection? Or should I build the app with a Firebase/Redux implementation like react-redux-firebase (https://github.com/prescottprue/react-redux-firebase)

score 0 · Answer 1 · answered Jan 04 '18 at 16:59

0

Redux uses 1 Store and everything goes through it. You can use the above code for one component and not to be shared between other components. You can use just React but not Redux. Here you did not use the power of Redux and instead used the classical React. In Redux your data is modeled in a way that you kinda in control in where the data is coming from and how to share it between different components. I suggest use Redux as a whole and make the Actions deal with Firebase and dispatch the data to your components.

See this answer for your reference:

React-Redux-Firebase - populate item with another item

answered Jan 04 '18 at 16:59

Chosen

847
2
9
21

I am aware that I am not using Redux here. I just want to know the feasibility of programming an app using a direct Firebase reference. And what makes Redux worth the time? It seems to be a lot of learning to take in (wheras implementing this solution is very quick). I could create my own minimal Flux implementation; I'm curious about going that direction. Thoughts? – user3191886 Jan 08 '18 at 21:16
@user3191886 you need to know what Redux does and why it has been created. When building a simple app with React it is fine until you reach to a point where you have a lot of uses of the State of the app. It gets more and more complex. Redux helps in here , where scaling your app becomes easier to do. If you are doing a simple app then just use ReactJS with Firebase and you should be ok. – Chosen Jan 08 '18 at 21:44

score 0 · Accepted Answer · answered Jan 08 '18 at 23:45

Here is the solution I implemented. Firebase handles all that I need in the code below. It makes use of the Singleton Creational Pattern:

File: './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;

File: './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>)
    }                                                                 
}

score 0 · Answer 3 · answered Aug 27 '19 at 08:39

We do not want our components communicating with firebase. Your components should not even know firebase is our database choice. The components should be completely unaware of where the data is coming from and where it is really going to. The components should be just concerned with the presentation of information and basic user interaction.

React is all about simple functions. This means that each function should only be responsible for a single task. Your application should be composed of pure functions so you can reuse such a function easily, anywhere in your application. In other words, a function shouldn’t be changing anything that’s not local to the function itself. The simpler the function, the more reusable it is.

Reactjs: Direct Firebase connection vs Firebase Redux store

3 Answers3