Table of Contents

getVal

Get a value from firebase using slash notation. This enables an easy migration from v1's dataToJS/pathToJS/populatedDataToJS functions to v2 syntax NOTE: Setting a default value will cause isLoaded to always return true

Parameters

  • firebase Object Firebase instance (state.firebase)
  • path String Path of parameter to load
  • notSetValue Any Value to return if value is not found in redux. This will cause isLoaded to always return true (since value is set from the start).

Examples

Basic

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

const enhance = compose(
  firebaseConnect(['todos/user1']),
  connect(({ firebase }) => ({
    // this.props.todos loaded from state.firebase.data.todos
    todos: getVal(firebase, 'data/todos/user1')
  })
)
export default enhance(SomeComponent)

Base Paths

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

export default connect(({ firebase }) => ({
  // this.props.auth loaded from state.firebase.auth
  auth: getVal(firebase, 'auth'),
  profile: getVal(firebase, 'profile')
})(SomeComponent)

Default Value

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

const defaultValue = {
 1: {
   text: 'Example Todo'
 }
}

const enhance = compose(
  firebaseConnect(['todos/user1']),
  connect(({ firebase }) => ({
    // this.props.todos loaded from state.firebase.data.todos
    todos: getVal(firebase, 'data/todos/user1', defaultValue)
  })
)

export default enhance(SomeComponent)

Returns Any Data located at path within firebase.

isLoaded

Detect whether items are loaded yet or not

Parameters

  • args ...any
  • item Object Item to check loaded status of. A comma separated list is also acceptable.

Examples

import React from 'react'
import PropTypes from 'prop-types'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'

const enhance = compose(
  firebaseConnect(['todos']),
  connect(({ firebase: { data: { todos } } }) => ({
    todos // state.firebase.data.todos from redux passed as todos prop
  }))
)

function Todos({ todos }) {
  // Message for if todos are loading
  if(!isLoaded(todos)) {
    return <span>Loading...</span>
  }

  // Message if todos are empty
  if(isEmpty(todos)) {
    return <span>No Todos Found</span>
  }

  return <div><pre>{JSON.stringify(todos, null, 2)}</pre></div>
}

Todos.propTypes = {
  todos: PropTypes.object
}

export default enhance(Todos)

Returns Boolean Whether or not item is loaded

isEmpty

Detect whether items are empty or not

Parameters

  • args ...any
  • item Object Item to check loaded status of. A comma seperated list is also acceptable.

Examples

import React from 'react'
import PropTypes from 'prop-types'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect, isEmpty, isLoaded } from 'react-redux-firebase'

const enhance = compose(
  firebaseConnect(['todos']),
  connect(({ firebase: { data: { todos } } }) => ({
    todos // state.firebase.data.todos from redux passed as todos prop
  }))
)

function Todos({ todos }) {
  // Message for if todos are loading
  if(!isLoaded(todos)) {
    return <span>Loading...</span>
  }

  // Message if todos are empty
  if(isEmpty(todos)) {
    return <span>No Todos Found</span>
  }

  return <todos>{JSON.stringify(todos)}</todos>
}

Todos.propTypes = {
  todos: PropTypes.object
}

export default enhance(Todos)

Returns Boolean Whether or not item is empty

populate

Populate with data from redux.

Parameters

  • state Object Firebase state object (state.firebase in redux store)
  • path String Path of parameter to load
  • populates Array Array of populate config objects
  • notSetValue (Object | String | Boolean) Value to return if value is not found

Examples

Basic

import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
const populates = [{ child: 'owner', root: 'users' }]

const enhance = compose(
  firebaseConnect([
    { path: 'todos', populates } // load "todos" and matching "users" to redux
  ]),
  connect((state) => ({
    // this.props.todos loaded from state.firebase.data.todos
    // each todo has child 'owner' populated from matching uid in 'users' root
    // for loading un-populated todos use state.firebase.data.todos
    todos: populate(state.firebase, 'todos', populates),
  })
)

export default enhance(SomeComponent)

Returns Object Data located at path within Immutable Object

results matching ""

    No results matching ""