React Redux Firebase 无法获取 firebase.storage

Posted 2023-02-22

【中文标题】React Redux Firebase 无法获取 firebase.storage

【英文标题】：React Redux Firebase cannot get firebase.storage

【发布时间】：2019-10-18 14:03:38

【问题描述】：

我正在使用react-redux-firebase 包并尝试将文件上传到存储。

我正在使用withFirebase HOC 并得到this.prop.firebase 但是，this.props.firebase.storage 和this.props.firebase.storage() 是undefined。

当我调用this.props.firebase.uploadFiles(file) 时，我收到以下错误：Firebase storage is required to upload files

这是我的index.js：

...
import  ReactReduxFirebaseProvider  from 'react-redux-firebase'
import  createFirestoreInstance, getFirestore, reduxFirestore  from 'redux-firestore'
import firebase from './config/firebaseConfig';

const rrfConfig =  userProfile: 'users', useFirestoreForProfile: true ;

const store = createStore(rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument( getFirestore )),
        reduxFirestore(firebase),
    )
);

const rrfProps = 
    firebase,
    config: rrfConfig,
    dispatch: store.dispatch,
    createFirestoreInstance
;

ReactDOM.render(
    <Provider store=store>
        <ReactReduxFirebaseProvider ...rrfProps>
            <App />
        </ReactReduxFirebaseProvider>
    </Provider>, document.getElementById('root')
);

这里是./config/firebaseConfig：

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const firebaseConfig = 
    apiKey: "#######",
    authDomain: "#######.firebaseapp.com",
    databaseURL: "https://######.firebaseio.com",
    projectId: "######",
    storageBucket: "########.appspot.com",
    messagingSenderId: "##########",
    appId: "#:#########:web:############"
;
firebase.initializeApp(firebaseConfig);
export default firebase;

最后是我的组件：

import React from 'react'
import withFirebase from 'react-redux-firebase'
import compose from "redux";

class DragAndDrop extends React.Component 

    onDragOver(e)
        e.preventDefault();
        console.log('over');
    

    onDragLeave()
        console.log('leave');
    

    handleDrop(e)
        e.preventDefault();
        let dt = e.dataTransfer;
        let files = dt.files;

        console.log(this.props.firebase.uploadFiles('/merchants', files));
    

    uploadFile(file)
        console.log(this.props.firebase.uploadFile(
            '/merchants',
            file
        ))
    

    render() 
        console.log(this.props);
        return (
            <div
                onDragOver=this.onDragOver
                onDragEnter=this.onDragOver
                onDragLeave=this.onDragLeave
                onDrop=this.handleDrop.bind(this)
                className="dnd">Drag And Drop</div>
        )
    


export default compose(
    withFirebase
)(DragAndDrop);

【问题讨论】：

你能给我提供操作代码吗？

【参考方案1】：

在您的./config/firebaseConfig 文件上导入firebase/auth 后添加导入firebase/storage，然后重试:)