如何在反应中初始化动作创建者中的firebase实例？答案

【问题标题】：How to initialize a firebase instance in the action creator in react?如何在反应中初始化动作创建者中的firebase实例？
【发布时间】：2019-06-05 03:07:25
【问题描述】：

我正在尝试在我的反应应用程序的动作创建器中使用 getFirebase() 来初始化 Firebase。但是，我得到未定义的Cannot read property 'getFirebase'。

我是 firebase 新手，我正在在线学习一个教程，因为我想在我的项目中使用 firebase。

请参考下面的动作创建者：

export const signIn = (credentials) => (dispatch, getState, { getFirebase }) => {

    const firebase = getFirebase();

    firebase.auth().signInWithEmailAndPassword(
        credentials.email,
        credentials.password
    ).then(() => {
        dispatch({type: 'LOGIN_SUCESS'});
    }).catch((error) => {
        dispatch({type: 'LOGIN_ERROR', error});
    });
}

请参考以下店铺：

import {createStore, combineReducers, applyMiddleware} from 'redux';
import userReducer from '../reducers/user';
import { firebaseReducer } from 'react-redux-firebase';
import thunk from 'redux-thunk';

export default () => {

    const store = createStore(
    combineReducers({
        user: userReducer,
        firebase: firebaseReducer
    }),
    compose(
        applyMiddleware(
          thunk.withExtraArgument(getFirebase)
        )
    )

    // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

    return store;
}

请参考下面的配置文件：

import firebase from 'firebase/app';
import 'firebase/auth';


// initializing firebase
const config = {
    apiKey: theapikey,
    authDomain: "*****",
    databaseURL: "*****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "****"
  };

  firebase.initializeApp(config);

  export default firebase;

请帮忙！提前致谢。

【问题讨论】：

标签： reactjs firebase redux react-redux

【解决方案1】：

首先，不要在此处发布您的 firebase 项目 apikey 和其他配置详细信息。

我相信通过状态管理与应用程序组件与商店进行交互是一种更好的方法，而不是将 firebase 直接绑定到商店。而是在组件中使用 firebase 方法/功能，然后根据 firebase 的响应操纵状态。您可以按照以下步骤使用 Firebase 身份验证：

在 Firebase.js 中导出您可能需要的身份验证或其他功能，而不是按如下方式导出 firebase 本身：

import * as firebase from 'firebase'; var config = { ......... } firebase.initializeApp(config); export const database = firebase.database().ref('whatever'); export const auth = firebase.auth(); export const googleProvider = new firebase.auth.GoogleAuthProvider(); export const twitterProvider = new firebase.auth.TwitterAuthProvider();
然后，在您的 Action js 中，您可以通过从 firebase.js 导入 auth 并导出 getUser 来定义登录功能：

export function getUser() { return dispatch => { dispatch({ type: USER_STATUS, payload: true }); auth.onAuthStateChanged(user => { dispatch({ type: GET_USER, payload: user }); dispatch({ type: USER_STATUS, payload: false }); }); }; export function login(email, password) { return dispatch => auth.signInWithEmailAndPassword(email, password); }
然后在登录组件js下提交调用登录函数：

this.props.login(this.state.email, this.state.password).catch(err => { this.setState({ error: err }); }); function mapStateToProps(state, ownProps) { return { user: state.user }; } .................. export default connect(mapStateToProps, { login})(yourlogincomponent)

希望这会有所帮助！

【讨论】：

不错的 api 关键内容

【解决方案2】：

只需从配置文件（您已初始化的位置）导入 firebase。这个getFirebase() 好像没必要。

import firebase from 'firebase-config';

firebase.auth()...

【讨论】：