useFirebaseConnect.md

Table of Contents

• useFirebaseConnect
  • Parameters
  • Examples

useFirebaseConnect

Hook that automatically listens/unListens to provided firebase paths using React's useEffect hook.

Parameters

• queriesConfig (Function | Array) Object, string, or array contains object or string for path to sync from Firebase or null if hook doesn't need to sync. Can also be a function that returns an object, a path string, or array of an object or a path string.

Examples

Ordered Data

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

export default function Todos() {
  // sync /todos from firebase into redux
  useFirebaseConnect(['todos'])
  // Connect to redux state using selector hook
  const todos = useSelector((state) => state.firebase.data.todos)
  return <div>{JSON.stringify(todos, null, 2)}</div>
}

Data that depends on props

import React from 'react'
import { compose } from 'redux'
import { useSelector } from 'react-redux'
import { useFirebaseConnect } from 'react-redux-firebase'

export default function Post({ postId }) {
  useFirebaseConnect([`posts/${postId}`]) // sync /posts/postId from firebase into redux
  const post = useSelector(
    ({
      firebase: {
        ordered: { posts }
      }
    }) => posts && posts[postId]
  )
  return <div>{JSON.stringify(post, null, 2)}</div>
}