Table of Contents

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

  • 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>
}

results matching ""

    No results matching ""