Javascript 在React应用程序中的何处初始化Firebase应用程序？

我正在尝试将Firebase集成到我的React应用程序中，在阅读了各种教程之后，我似乎无法就Firebase初始化代码

Firebase.initializeApp（config）

的放置位置达成一致意见

我的应用程序的结构如下：

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

每个文件如下所示

app.js

是否使用服务器端渲染执行所有express设置

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;

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;

从“React”导入React；
从“/Layout.jsx”导入布局；
从“./PageContent.jsx”导入页面内容；
导入“/global.css”；
类索引扩展了React.Component{
render（）{
返回(
);
}
}
出口违约指数；

PageContent.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;

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;

从“React”导入React；
从“react dom”导入react dom；
从“./components/Landing_Page/Landing.jsx”导入LandingPage；
类PageContent扩展了React.Component{
render（）{
返回(
);
}
}
如果（窗口类型！==“未定义”）{
ReactDOM.render（
,
document.getElementById（'root'））
);
}
导出默认页面内容；

我需要确保Firebase在我网站的每个页面都可用。现在它只是一个单页应用，但最终我会添加更多

---

有谁能帮我理解我可以把数据库初始化代码放在哪里，以便它可以应用到任何地方吗？

看来，您想要的是firebase可以在全球范围内提供给您的组件

在使用redux之前，同样的问题是，react组件如何使用全局状态树？全局变量？来吧，我们会知道全局变量是邪恶的。反应道具？这看起来很有趣，但从根到叶组件传递道具并不是一件有趣的事

来营救。您只需要像redux/react路由器一样为react使用firebase绑定

假设你不想重新发明轮子

如果你使用ReDux，考虑 如果你讨厌样板，请考虑

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

我就是这样做的

在

app.js

旁边创建文件

Firebase.js

，并放入初始化代码

Firebase.js文件

然后将

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;

从“React”导入React；
从“/../firebase.js”导入firebase“/创建名为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/>)

从'firebase'导入{firebaseAuth}
从“signin.js”导入SignInfo表单
const ModalSignIn=props=>{
const[email，setEmail]=useState（）
const[password，setPassword]=useState（）
常量handleSubmit=e=>{
e、 预防默认值（）
firebaseAuth
.使用电子邮件和密码登录（电子邮件、密码）
。然后（res=>{
console.log（res.user）
})
.catch（错误=>{
常量{code，message}=err
console.log（代码、消息）
})
}
返回（）
在ReactDOM.render调用之前，可以尝试在PageContent.jsx文件中执行此操作。这不会多次初始化firebase吗？您可以像导出默认值一样进行初始化。
export default！firebase.apps.length？firebase.initializeApp（配置）：firebase.app（）
为避免多次初始化，这似乎是一个不错的选择，但仅考虑@NitishDhar的最后一条注释，以避免多次初始化firebase应用程序。有人介意解释上述注释吗？ES6模块不是只评估一次吗？因此firebase应用程序只初始化一次，没有建议的单例解决方案？@NitishDhar的建议是不必要的。ES6模块是单例的，在运行时开始时为每个文件创建一个实例。因此，
initialiseApp
只会被调用一次。祝您快乐！我创建了一个简单的沙盒，展示了这一点：使用上下文API非常有用，但是，我发现这会导致我的问题：我需要访问actions.js文件中的Firebase.auth实例，在该实例中，我使用Redux thunk登录用户，并发送一个操作以使用用户ID更新我的Redux存储。因为上下文提供程序将数据传递给包装组件，这是不可能实现的，因为actions.js文件不是一个组件。我无法我们无法找到任何直接访问提供商的方法。