将Firebase配置传递给组件

3

我的根firebase配置代码在一个名为FirebaseConfig.js的文件中。我想能够从容器组件中访问配置在那里的数据,在整个应用程序中配置特定于所述子组件的子引用。

FirebaseConfig.js

import React, { Component } from 'react';
import * as firebase from 'firebase';

class FirebaseConfig extends Component {
  render() {  
    const config = {...
    };
  firebase.initializeApp(config);
  // INIT DB REFERENCE
  const db = firebase.database();
  const dbRef = db.ref();
  // INIT STORAGE REFERENCE
  const storage = firebase.storage();
  const storageRef = storage.ref();
  console.log("FB INIT'D with STORAGE REF: " + storageRef);

  return FirebaseConfig; 
    }
  }
 export default FirebaseConfig;

文件结构

src
 |__App.js
 |__index.js
 |__FirebaseConfig.js
 |__ /Home
     |__ Home.js
     |__ HomeContainer.js  //Want to access Config var's here

这个Firebase应用程序是否可以进行如此配置,如果可以的话 - 这是一个好的模式吗?
1个回答

4
这样配置Firebase应用程序是否可行,如果可以,这是一个好的模式吗?
我认为这不是一个好的模式。
在我看来,你应该将Firebase实例保留在React组件之外。而是使用redux来存储你的firebase数据。分发一个action来填充reducer,并使用@connect将数据连接到React组件上。
你一定要检查@r-park firebase todo app project以获得更好的理解。它组织得很好,规划得很好。我将其用作我的一个小项目的基础。

谢谢,虽然我正在寻找一种避免使用redux的方法,因为我有一个有限的时间框架来完成这个项目,并且认为学习它需要太长时间。 - SamYoungNY
@SamYoungNY 如果你已经知道如何设置React,那么Redux就适合你。阅读一些教程,甚至观看YouTube视频,那里有很好的内容。Redux非常简单,它是React的常见模式。但是,现在我非常认真地告诉你,如果你不熟悉Firebase,它可能会给你带来问题。当我开始为我的公司构建项目时,我从Firebase切换到了GraphCool(GraphQL PaaS)。如果你正在选择数据库提供商,我建议你切换到GraphCool! - loelsonk

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接