Table of Contents

firebaseConnect

Extends React.Component

Higher Order Component that automatically listens/unListens to provided firebase paths using React's Lifecycle hooks.

Parameters

  • storeKey (optional, default 'store')
  • watchArray Array Array of objects or strings for paths to sync from Firebase. Can also be a function that returns the array. The function is passed the current props and the firebase object.

Examples

Basic

// this.props.firebase set on App component as firebase object with helpers
import { firebaseConnect } from 'react-redux-firebase'
export default firebaseConnect()(App)

Data

import { connect } from 'react-redux'
import { firebaseConnect, dataToJS } from 'react-redux-firebase'

// sync /todos from firebase into redux
const fbWrapped = firebaseConnect([
  'todos'
])(App)

// pass todos list from redux as this.props.todosList
export default connect(({ firebase }) => ({
  todosList: dataToJS(firebase, 'todos'),
  profile: pathToJS(firebase, 'profile'), // pass profile data as this.props.profile
  auth: pathToJS(firebase, 'auth') // pass auth data as this.props.auth
}))(fbWrapped)

Data that depends on props

import { connect } from 'react-redux'
import { firebaseConnect, dataToJS } from 'react-redux-firebase'

// sync /todos from firebase into redux
const fbWrapped = firebaseConnect((props) => ([
  `todos/${props.type}`
])(App)

// pass todos list for the specified type of todos from redux as `this.props.todosList`
export default connect(({ firebase, type }) => ({
  todosList: dataToJS(firebase, `data/todos/${type}`),
}))(fbWrapped)

Data that depends on auth state

import { connect } from 'react-redux'
import { firebaseConnect, dataToJS } from 'react-redux-firebase'

// sync /todos from firebase into redux
const fbWrapped = firebaseConnect((props, firebase) => ([
  `todos/${firebase._.authUid}`
])(App)

// pass todos list for the specified type of todos from redux as `this.props.todosList`
export default connect(({ firebase }) => ({
  todosList: dataToJS(firebase, `data/todos/${firebase.getIn(['auth', 'uid'])}`),
}))(fbWrapped)

Returns Function that accepts a component to wrap and returns the wrapped component

results matching ""

    No results matching ""