useFirestoreConnect.md

Table of Contents

• createUseFirestoreConnect
• useFirestoreConnect

createUseFirestoreConnect

React hook that automatically listens/unListens to provided firebase paths. WARNING!! This is an advanced feature, and should only be used when needing to access a firebase instance created under a different store key. Firebase state (state.firebase)

Examples

Basic

// props.firebase set on App component as firebase object with helpers
import { createUseFirestoreConnect } from 'react-redux-firebase'

const firestoreConnect = createUseFirestoreConnect()

export default useFirestoreConnect()

Returns Function React hook that accepts watch query

useFirestoreConnect

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

Parameters

• queriesConfig (Object | String | Array | Function) An object, string, or array of object or string for paths to sync from firestore. Can also be a function that returns the object, string, or array of object or string.

Examples

Basic

import React from 'react'
import { map } from 'lodash'
import { connect } from 'react-redux'
import { useFirebaseConnect } from 'react-redux-firebase'

const TodosList = ({ todosList }) => {
  useFirebaseConnect('todos') // sync todos collection from Firestore into redux

  return <ul>{_.map(todosList, todo => <li>{todo}</li>)}</ul>
}

// pass todos list from redux as props.todosList
export default compose(
  connect((state) => ({
    todosList: state.firestore.data.todos
  })
)(TodosList)

Object as query

import React, { useMemo } from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import { useFirebaseConnect } from 'react-redux-firebase'

const TodoItem = ({ todoId, todoData }) => {
  useFirebaseConnect(() => ({
    collection: 'todos',
    doc: todoId
  }), [todoId]) // include dependency in the hook

  return <div>{JSON.stringify(todoData)}</div>
}

// pass todo data from redux as props.todosList
export default compose(
  connect((state) => ({
    todoData: get(state, ['firestore', 'data', 'todos', todoId])
  })
)(TodoItem)