Table of Contents

• createFirestoreConnect
• firestoreConnect

createFirestoreConnect

Function that creates a Higher Order Component that automatically listens/unListens to provided firebase paths using React's Lifecycle hooks. WARNING!! This is an advanced feature, and should only be used when needing to access a firebase instance created under a different store key.

Parameters

• storeKey String Name of redux store which contains Firebase state (state.firebase) (optional, default 'store')

Examples

Basic

// this.props.firebase set on App component as firebase object with helpers
import { createFirestoreConnect } from 'react-redux-firebase'
// create firebase connect that uses another redux store
const firestoreConnect = createFirestoreConnect('anotherStore')
// use the firebaseConnect to wrap a component
export default firestoreConnect()(SomeComponent)

Returns Function HOC that accepts a watchArray and wraps a component

firestoreConnect

Extends React.Component

Higher Order Component that automatically listens/unListens to provided Cloud Firestore paths using React's Lifecycle hooks. Make sure you have required/imported Cloud Firestore, including it's reducer, before attempting to use. Note Populate is not yet supported.

Parameters

• queriesConfig Array Array of objects or strings for paths to sync from Firebase. Can also be a function that returns the array. The function is passed the current props and the firebase object.

Examples

Basic

// this.props.firebase set on App component as firebase object with helpers
import { firestoreConnect } from 'react-redux-firebase'
export default firestoreConnect()(SomeComponent)

Basic

import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'

// pass todos list from redux as this.props.todosList
export default compose(
  firestoreConnect(['todos']), // sync todos collection from Firestore into redux
  connect((state) => ({
    todosList: state.firestore.data.todos,
    profile: state.firestore.profile, // pass profile data as this.props.profile
    auth: state.firestore.auth // pass auth data as this.props.auth
  })
)(SomeComponent)

Returns Function that accepts a component to wrap and returns the wrapped component