Table of Contents

getVal

Deprecated - This helper will be removed in future versions. Please use object destructuring or utilities from other libraries such as lodash's get. 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 data from redux state is loaded yet or not

Parameters

  • args ...object Items 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 from 'react-redux-firebase/lib/firebaseConnect'
import { isLoaded, isEmpty } from 'react-redux-firebase/lib/utils'

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 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 multiple locations of redux state.

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 ""