将 Firebase 配置传递给组件

Question

我的根 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 应用，如果可以，这是一个好的模式吗？

Answer 1

是否可以像这样配置 Firebase 应用程序，如果可以 - 是 这是一个很好的模式？

我认为这不是一个好的模式。

在我看来，您应该将 firebase 实例保留在 react 组件之外。请改用redux 来存储您的firebase 数据。发送 action 以使用您的 react 组件填充 reducer 和 @connect 您的数据。

您一定要查看@r-park 的firebase todo app project 以获得更好的理解。精心组织和计划。我用它作为我的一个小项目的基础。