Как исправить ошибку React / Redux / Firebase при загрузке файла в хранилище

Question

Я настраиваю загрузчик файлов, который будет загружать изображения в мое хранилище Firebase. Я использую React-Redux-Firebase, чтобы сделать все это. Согласно docs , я должен иметь возможность использовать функции uploadFiles или uploadFile, которые поступают из props.firebase с использованием firebaseConnect или getFirebase (). Когда я пытаюсь это сделать, я получаю сообщение об ошибке: Uncaught Error: для загрузки файлов требуется хранилище Firebase.

export const addImage = (image, callback = () => {}) => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        const firebase = getFirebase();
        const imagesPath = "images";

        firebase.uploadFile(imagesPath, image).then(uploadTaskSnapshot => {
            console.log("uploadTaskSnapshot", uploadTaskSnapshot);
        });

        dispatch({ type: "ADDED_IMAGE", image });
    };
};

Функция существует, когда я пытаюсь его утешить. Но почти как мое хранилище не настроено. Я проверил свою консоль Firebase, и она определенно существует. Я также проверил мои настройки API-ключа и правильная переменная хранилища.

Вот код настройки, который я использую в моем файле index.js, а также в моем файле firebaseConfig.

Index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, { useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true })
    )
);

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById("root")
    );
});

fbConfig.js:

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

// Initialize Firebase
var config = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);
firebase.firestore();
console.log("firebase", firebase);

export default firebase;

Answer 1

Я нашел ответ.Мне нужен был дополнительный импорт, который импортировал бы «firebase / storage» в мой файл index.js.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig";
import "firebase/storage";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, { useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true })
    )
);

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById("root")
    );
});