Table of Contents

• useFirebaseConnect
  • Parameters
  • Examples

useFirebaseConnect

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

Parameters

• queriesConfig (object | string | 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>
  )
}

Data that depends on props, an array as a query

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

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