React Redux Firebase 无法获取 firebase.storage

Question

我正在使用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);

Answer 1

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