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