feat(core): support lazy loading and modular loading of Firebase

[nicolasgarnier]

In general it would be nice if react-redux-firebase was compatible with lazy-loading or at least modular loading of the Firebase library which is rather large.

Use case is: What if I want to only use firebase auth (and not Firebase database) with react-redux-firebase?

In my code, if I only want to use Firebase auth (and not Firebase database, Firebase storage etc...) I would load the SDK like this:

import firebase from 'firebase/app';
import 'firebase/auth';

In general, the best would be that react-redux-firebase not depend on importing the firebase SDK but only rely on being passed a Firebase app instance and would simply test if firebase features are loaded - e.g. if(firebase.database){/*load firebase database middleware*/} - to activate parts of the middleware (or have multiple middlewares, one for each features).

[prescottprue]

@nicolasgarnier This is a really interesting thought. Going to look into adding it.

[prescottprue]

v2.0.0-beta.7 includes a first swing at supporting passing just the app instance.

Let me know if it does not handle your use case or work for you as expected.

It uses extendApp, which I didn't know about until today. Not sure if that is the best approach or not so totally open to other implementations.

[nicolasgarnier]

Thanks! I'll have a look asap and let you know :)

[nicolasgarnier]

Unfortunately this did not work for me.

I tried using react-redux-firebase with only Firebase auth loaded (and not firebase database).

Usecase: Let's say that hypothetically I am not interested in database but only Firebase auth state event or I want to load firebase/auth first, so that the sign-in pages load faster and then delay loading the firebase/database.

I am getting this error:

error: /Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/react-redux-firebase/lib/createFirebaseInstance.js:30
      database: { ServerValue: firebase.firebase_.database.ServerValue }
                                                          ^

TypeError: Cannot read property 'ServerValue' of undefined
    at createFirebaseInstance (/Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/react-redux-firebase/lib/createFirebaseInstance.js:30:59)
    at /Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/react-redux-firebase/lib/compose.js:28:77
    at /Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/redux/lib/applyMiddleware.js:38:19
    at /Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/redux/lib/applyMiddleware.js:38:19
    at createStore (/Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/redux/lib/createStore.js:65:33)
    at Object.<anonymous> (/Users/nivco/Documents/workspace/friendlypix-web-react/frontend/App.jsx:35:22)
    at Module._compile (module.js:570:32)
    at loader (/Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/nivco/Documents/workspace/friendlypix-web-react/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)

Here is some code to replicate:

import firebase from 'firebase/app';
import 'firebase/auth'

// ...

const firebaseApp = firebase.initializeApp(firebaseConfig);

export const store = createStore(
  combineReducers({
    ...reducers,
    firebaseState: firebaseStateReducer
  }),
  initialState,
  compose(
    applyMiddleware(thunk.withExtraArgument(getFirebase)),
    reactReduxFirebase(firebaseApp, {enableRedirectHandling: false})
  )
);

Ideally, this should work. Either automatically or by passing an explicit option to disable database.

Bonus point if the Firebase database integration can start working again if I lazy load firebase/database later on.

I think this is important going forward to save on build size. And in case more features are added to Firebase in the future which would be a good fit for this library :)

[prescottprue]

@nicolasgarnier Is there documentation other than the API reference for how best to use the app instance?

I am having trouble figuring out the best pattern to do this. When passing around the app instance instead of the whole firebase library, firebase.database.ServerValue does not work as expected (firebase.database is only a function, the object/getter is not available on the app instance).

For now, I removed the usage of firebase.database.ServerValue in the extendApp call, and check for existence before using it.