firestoreConnect.md

Table of Contents

• createFirestoreConnect
• firestoreConnect

createFirestoreConnect

Function that creates a Higher Order Component which 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

// 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

// 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 props.todosList
export default compose(
  firestoreConnect(() => ['todos']), // sync todos collection from Firestore into redux
  connect((state) => ({
    todosList: state.firestore.data.todos
  })
)(SomeComponent)

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