React Redux Firebase не может получить firebase.storage - PullRequest
Новая
       20

React Redux Firebase не может получить firebase.storage

1 голос
/ 03 июня 2019

Я использую пакет 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 Ответ

1 голос
/ 03 июня 2019

Добавьте импорт firebase/storage после импорта firebase/auth в файл ./config/firebaseConfig и повторите попытку :)

...