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，然后重试:)

React Redux Firebase 无法获取 firebase.storage

React Redux Firebase cannot get firebase.storage

firebase

reactjs

redux

firebase-storage

react-redux-firebase