Table of Contents

• getVal
  • Parameters
  • Examples
• isLoaded
  • Parameters
  • Examples
• isEmpty
  • Parameters
  • Examples
• populate
  • Parameters
  • Examples

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