为什么 react redux firebase 不是一个函数？

Question

我正在学习 Firestore 与 react native 的集成，并且遇到了这个非常奇怪的错误。在此代码中，带有增强器的商店在不同的文件中创建，然后在主 App.js 文件中使用该商店。任何帮助将不胜感激。

The error appearing on the phone

store.js

import { createStore, compose } from 'redux'
import { reactReduxFirebase,getFirebase } from 'react-redux-firebase'
import { reduxFirestore,getFirestore } from 'redux-firestore'
import ReduxThunk from 'redux-thunk';
import { initialState, rootReducer } from '../Reducers/index.js'
import fbConfig from './fbConfig'
import firebase from 'firebase/app'
import 'firebase/firestore'

if (!firebase.apps.length) {
   firebase.initializeApp(fbConfig)
}


const enhancers = [
  reduxFirestore(firebase),
  reactReduxFirebase(firebase, {
    userProfile: 'Movies',
    useFirestoreForProfile: true,
  })
]

const reduxDevToolsExtension = window.devToolsExtension
if (
  process.env.NODE_ENV === "development" &&
  typeof reduxDevToolsExtension === "function"
) {
  enhancers.push(reduxDevToolsExtension())
}

const composedEnhancers = compose(
  ...enhancers,
  applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore}))
)

const store = createStore(rootReducer, initialState, composedEnhancers)


export default store

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import {View,Platform,StatusBar} from 'react-native';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/Reducers';
import SafeAreaView from 'react-native-safe-area-view';
import RootNav from './src/Navigator';
import store from './src/config/store.js'

import TheatreList from './src/Components/TheatreList';


class App extends Component {

  render() {

    return (
        <View style={{flex:1}}>
          <Provider store={store}>
            <RootNav />
          </Provider>
        </View>
    );
  }
}

export default App;

Answer 1

我认为您尝试使用的内容是错误的。你想用的好像是这个。

示例

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import firebase from 'firebase/app'
import 'firebase/auth'
// import 'firebase/firestore' // <- needed if using firestore
// import 'firebase/functions' // <- needed if using httpsCallable
import { createStore, combineReducers, compose } from 'redux'
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const fbConfig = {}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users'
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

// Initialize firebase instance
firebase.initializeApp(fbConfig)

// Initialize other services on firebase instance
// firebase.firestore() // <- needed if using firestore
// firebase.functions() // <- needed if using httpsCallable

// Add firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseReducer
  // firestore: firestoreReducer // <- needed if using firestore
})

// Create store with reducers and initial state
const initialState = {}
const store = createStore(rootReducer, initialState)

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  // createFirestoreInstance // <- needed if using firestore
}

// Setup react-redux so that connect HOC can be used
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Todos />
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

render(<App />, document.getElementById('root'))