withFirestore.md

Table of Contents

• createWithFirestore
• withFirestore

createWithFirestore

Function that creates a Higher Order Component that which provides firebase, firestore, and dispatch to React Components.

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 Firestore state (state.firestore) (optional, default 'store')

Examples

Basic

import { createWithFirestore } from 'react-redux-firebase'

// create withFirestore that uses another redux store
const withFirestore = createWithFirestore('anotherStore')

// use the withFirestore to wrap a component
export default withFirestore(SomeComponent)

Returns Function Higher Order Component which accepts an array of watchers config and wraps a React Component

withFirestore

Extends React.Component

Higher Order Component that attaches firestore, firebase and dispatch as props to React Components. Firebase instance is gathered from store.firestore, which is attached to store by the store enhancer (reduxFirestore) during setup of redux-firestore

Examples

Basic

import React from 'react'
import { withFirestore } from 'react-redux-firebase'

function AddTodo({ firestore: { add } }) {
  return (
    <div>
      <button onClick={() => add('todos', { done: false, text: 'Sample' })}>
        Add Sample Todo
      </button>
    </div>
  )
}

export default withFirestore(AddTodo)

Within HOC Composition

import React from 'react'
import { compose } from 'redux' // can also come from recompose
import { withHandlers } from 'recompose'
import { withFirestore } from 'react-redux-firebase'

function AddTodo({ addTodo }) {
  return (
    <div>
      <button onClick={addTodo}>
        Add Sample Todo
      </button>
    </div>
  )
}

const enhance = compose(
  withFirestore,
  withHandlers({
    addTodo: props => () =>
       props.firestore.add(
         { collection: 'todos' },
         { done: false, text: 'Sample' }
       )
  })
)

export default enhance(AddTodo)

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