我在哪里初始化React应用程序中的Firebase应用程序？

Question

我正在尝试将Firebase集成到我的React应用程序中,在查看各种教程之后,我似乎无法就放置firebase初始化代码的位置达成共识firebase.initializeApp(config).

我的应用程序的结构是这样的:

- app.js
- components
   |___Index.jsx
   |___Layout.jsx
   |___PageContent.jsx

每个文件如下所示

app.js

是否所有快速设置与服务器端呈现

Index.jsx

import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';

class Index extends React.Component {
  render() {
    return (
        <Layout title={this.props.title}>
            <PageContent />
        </Layout>
    );
  }
}

export default Index;

PageContent.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import LandingPage from './components/Landing_Page/Landing.jsx';

class PageContent extends React.Component {
    render() {
        return (
            <LandingPage />
        );
    }
}

if (typeof window !== 'undefined') {
    ReactDOM.render(     
        <PageContent />,
        document.getElementById('root')        
    );
}

export default PageContent;

我需要确保Firebase在我网站的每个页面都可用.现在它是一个单页应用程序,但最终我将添加更多.

任何人都可以帮助我理解我可能把数据库初始化代码放在哪里,以便它应用于所有地方吗？

Answer 1

这就是我的方式

在Firebase.js旁边创建文件app.js并放入初始化代码

Firebase.js文件

import * as firebase from 'firebase';

let config = {
    apiKey: "XXXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX"
};
firebase.initializeApp(config);

export default firebase;

然后Firebase.js,例如,在每个要使用它的位置导入文件

import React from 'react';    
import firebase from './../Firebase.js'     // <------  import firebase

class Test extends React.Component {

    componentDidMount(){
        firebase.database().ref().child("X").on('value' , {...});
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

export default Test;

Answer 2

创建名为 firebase.js 的文件

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'test-XXXX.firebaseapp.com',
  databaseURL: 'https://test-db.firebaseio.com',
  projectId: 'test-XXXX',
  storageBucket: 'test-bucket.appspot.com',
  messagingSenderId: 'XXXXXXX',
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};


firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebase.auth();
export const firestore = firebase.firestore()

然后按如下方式使用它：

import { firebaseAuth } from 'firebase'
import SigninForm from 'signin.js'

const ModalSignIn = props => {

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()

  const handleSubmit = e => {
    e.preventDefault()
    firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(res => {
        console.log(res.user)
      })
      .catch(err => {
        const { code, message } = err
        console.log(code, message)
      })
  }

  return (<SigninForm/>)

Answer 3

看来您想要的是 firebase 可以在全局范围内供您的反应组件使用。

在使用redux之前也是同样的问题，react组件是如何消费全局状态树的？全局变量？来吧，我们就会知道全局变量是邪恶的。反应道具？它看起来非常反应，但是将 props 从 root 传递到 leaf 组件并不有趣。

Context API来救援。您只需要 firebase 绑定即可进行反应，就像 redux/react-router 那样。

假设你不想重新发明轮子，

• 如果你使用redux，请考虑react redux firebase
• 如果你讨厌样板文件，请考虑使用React Firebase

当然，您也可以通过刚才提到的 React 上下文构建自己的 React Firebase 绑定。