reactjsfirebasereduxreact-redux-firebaseredux-firestore

object() not a function in redux firebase react


TypeError: Object(...) is not a function in reactjs while implementing firebase https://www.youtube.com/watch?v=gf5bVfVlNUM&list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3&index=17 used this tutorial but then error occured

ss of browser to see the error

code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './redux/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'

const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
    reactReduxFirebase(fbConfig),
    reduxFirestore(fbConfig) // redux bindings for firestore
  )
);

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



Solution

  • 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 './redux/reducers/rootReducer'
    
    import { Provider } from 'react-redux'
    import thunk from 'redux-thunk'
    import { reduxFirestore, getFirestore, createFirestoreInstance } from 'redux-firestore';
    import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
    import fbConfig from './config/fbConfig'
    import firebase from "firebase/app";
    
    const store = createStore(rootReducer,
      compose(
        applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
        reduxFirestore(fbConfig) // redux bindings for firestore
      )
    );
    
    const rrfProps = {
      firebase,
      config : fbConfig,
      dispatch: store.dispatch,
      createFirestoreInstance
    }
    
    ReactDOM.render(
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <App />
        </ReactReduxFirebaseProvider>
      </Provider>,
      document.getElementById("root")
    );
    

    this one will work fine