Table of Contents

• useFirestoreConnect
  • Parameters
  • Examples

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. Populate is supported for Firestore as of v0.6.0 of redux-firestore (added as part of issue #48).

Parameters

• queriesConfigs (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 { useSelector } from 'react-redux'
import { useFirestoreConnect } from 'react-redux-firebase'

export default function TodosList() {
  useFirestoreConnect(['todos']) // sync todos collection from Firestore into redux
  const todos = useSelector((state) => state.firestore.data.todos)
  return (
    <ul>
      {todos &&
        todos.map((todo) => (
          <li>
            id: {todo.id} todo: {todo.description}
          </li>
        ))}
    </ul>
  )
}

Object as query

import React from 'react'
import { useSelector } from 'react-redux'
import { useFirestoreConnect } from 'react-redux-firebase'

export default function TodoItem({ todoId }) {
  useFirestoreConnect([
    {
      collection: 'todos',
      doc: todoId
    }
  ])
  const todo = useSelector(
    ({ firestore: { data } }) => data.todos && data.todos[todoId]
  )

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