Table of Contents

createFirebaseConnect

Function that creates a Higher Order Component that automatically listens/unListens to provided firebase paths using React's Lifecycle hooks. WARNING!! This is an advanced feature, and should only be used when needing to access a firebase instance created under a different store key.

Parameters

  • storeKey String Name of redux store which contains Firebase state (state.firebase) (optional, default 'store')

Examples

Basic

// this.props.firebase set on App component as firebase object with helpers
import { createFirebaseConnect } from 'react-redux-firebase'
// create firebase connect that uses another redux store
const firebaseConnect = createFirebaseConnect('anotherStore')
// use the firebaseConnect to wrap a component
export default firebaseConnect()(SomeComponent)

Returns Function HOC that accepts a watchArray and wraps a component

firebaseConnect

Extends React.Component

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

Parameters

  • 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 } 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((state) => ({
  todosList: state.firebase.data.todos,
  profile: state.firebase.profile, // pass profile data as this.props.profile
  auth: state.firebase.auth // pass auth data as this.props.auth
}))(fbWrapped)

Data that depends on props

import { connect } from 'react-redux'
import { firebaseConnect } 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: { data } }, { type }) => ({
  todosList: data.todos && data.todos[type],
}))(fbWrapped)

Data that depends on auth state

import { connect } from 'react-redux'
import { firebaseConnect } 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: { data, auth } }) => ({
  todosList: data.todos && data.todos[auth.uid],
}))(fbWrapped)

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

results matching ""

    No results matching ""