feat(core): non-HOC version of firebaseConnect, for use with server side rendering

[marekolszewski]

Description

This PR adds a new connect helper to the props.firebase object that lets users connect their redux store to the firebase DB without requiring the firebaseConnect HOC. This is useful for populating your redux state ahead of rendering your React app, a typical pattern when performing server side rendering.

Check List

If not relevant to pull request, check off as complete

• All tests passing
• Docs updated with any changes or examples if applicable
• Added tests to ensure new feature(s) work properly

[prescottprue]

Nice idea for a feature!

I actually started on some examples that include doing this by hand with watchEvent in the last few days, but it is much nicer to have a helper like this.

One concern is the unmounting of the listeners added by watchEvent. We could handle this with explanation notes in the docs, but it might be nice to think about an easy way to handle it.

We may have to come up with a nicer name for export though since connect is used by react-redux, which is commonly integrated with react-redux-firebase. Maybe firebaseWatchers or firebaseListeners?

[prescottprue]

Kinda a nitpick: We should be able to use watchEvents and just pass the listener event settings array right into it instead of needing to call the map here.

Only reason I care is that I followed the same pattern when building the new redux-firestore stuff.

[marekolszewski]

That's what I had initially but watchEvents doesn't return a promise, which is important for SSR as you have to wait for the data to be fetched before rendering. I could update watchEvents if you want.

[prescottprue]

Great work. I think it will be ready to merge if we come up with a new name for the export.

Maybe firebaseWatchers or firebaseListeners?

[prescottprue]

What about a different name for this export since react-redux uses connect and people commonly integrate with that.

[marekolszewski]

Sure, happy to change it. How about firebaseConnectHelper or connectToEvents (to match watchEvents)?

[prescottprue]

Great work with the comments here.

[prescottprue]

This has been renamed to promiseEvents to more closely match watchEvent since it is exposed on the firebase instance itself. It looked a little weird to have firebase.firebaseWatch

[greaveselliott]

Hi @prescottprue,

I'm attempting to preload my redux state from firebase using store.firebase.promiseEvents().

Even though the promise resolves, the firebase data is never pulled, instead the request just hangs. I've tested to see if this is due to a race-condition, but I get the same problem. I've included a snapshot of my store's state when the promise resolves below.

{ 
  requesting: { 
    once: true,
    flamelink: true,
    'flamelink/environments/production/content/blog/en-US': true 
  },
  requested: { 
    once: false,
    flamelink: false,
    'flamelink/environments/production/content/blog/en-US': false 
  },
  timestamps: { 
    once: 1522711881049,
    flamelink: 1522711881049,
    'flamelink/environments/production/content/blog/en-US': 1522711881052 
  },
  data: {}
...
}

I've been tinkering with this for a few hours and seem to be getting nowhere, I appreciate any help you can offer.

Elliott

[prescottprue]

@greaveselliott A little hard to tell from what you are posting. Lets open a new issue with your exact use case with the listeners that are being set as well as any rules you have to make sure it is correctly replicated.