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

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

Ordered Data

import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'

const enhance = compose(
  firebaseConnect([
    'todos' // sync /todos from firebase into redux
  ]),
  connect((state) => ({
    todos: state.firebase.ordered.todos
  })
)

// use enhnace to pass todos list as props.todos
const Todos = enhance(({ todos })) =>
  <div>
    {JSON.stringify(todos, null, 2)}
  </div>
)

export default enhance(Todos)

Data that depends on props

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

const enhance = compose(
  firebaseConnect((props) => ([
    `posts/${props.postId}` // sync /posts/postId from firebase into redux
  ]),
  connect((state, props) => ({
    post: getVal(state.firebase.data, `posts/${props.postId}`),
  })
)

const Post = ({ post }) => (
  <div>
    {JSON.stringify(post, null, 2)}
  </div>
)

export default enhance(Post)

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

results matching ""

    No results matching ""