Skip to content
Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
Branch: master
Clone or download


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github v3.2.0 (#886) Mar 21, 2020
bin v3.3.0 (#889) Mar 21, 2020
docs fix(docs): update link to v3 migration guide (#893) - @gregfenton Mar 28, 2020
examples chore(deps): bump acorn in /examples/complete/firestore (#881) Mar 21, 2020
src v3.3.0 (#889) Mar 21, 2020
test v3.3.0 (#889) Mar 21, 2020
.babelrc v3.0.0-alpha.4 (#597) Jan 2, 2019
.codeclimate.yml v3.3.0 (#889) Mar 21, 2020
.eslintignore Update Material Example To React 16.6 (#565) Nov 18, 2018
.eslintrc.js feat(core): add eslint-plugin-json and update jsdoc comments Oct 12, 2019
.gitignore v3.0.0-alpha.16 Aug 15, 2019
.npmignore v1.5.0 (#270) Sep 18, 2017
.prettierrc Builds section added to README. Webpack version updated. .prettierrc … Feb 20, 2018 docs: react-router 4 support notes and github templates (#120) Apr 29, 2017
CNAME Gitbook docs copied from site into repo. Dec 3, 2016 Version v1.2.0 (#37) Jan 23, 2017 chore(docs): add section to contributing docs about updating API docs - Jan 29, 2020 Gitbook docs copied from site into repo. Dec 3, 2016 Version v1.2.0 (#37) Jan 23, 2017 v3.2.0 (#886) Mar 21, 2020 chore(docs): use correct link for useFirestoreConnect - #806, #817 Jan 29, 2020
book.json v3.0.2 Oct 13, 2019
codecov.yml v1.0.0 Oct 14, 2016
index.d.ts v3.3.0 (#889) Mar 21, 2020
package-lock.json v3.3.0 (#889) Mar 21, 2020
package.json v3.3.0 (#889) Mar 21, 2020
webpack.config.js feat(core): add uglify and lodash plugin to webpack build to shrink b… Jul 13, 2019


NPM version NPM downloads Quality Code Coverage Code Style License Build Status


Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.

Simple Example

Edit Simple Example

The Material Example is deployed to


  • Out of the box support for authentication (with auto loading user profile from database/firestore)
  • Full Firebase Platform Support Including Real Time Database, Firestore, and Storage
  • Automatic binding/unbinding of listeners through React Hooks (useFirebaseConnect, useFirestoreConnect) or Higher Order Components (firebaseConnect and firestoreConnect)
  • Population capability (similar to mongoose's populate or SQL's JOIN)
  • Support small data ( using value ) or large datasets ( using child_added, child_removed, child_changed )
  • Multiple queries types supported including orderByChild, orderByKey, orderByValue, orderByPriority, limitToLast, limitToFirst, startAt, endAt, equalTo
  • Tons of examples of integrations including redux-thunk and redux-observable
  • Server Side Rendering Support
  • react-native support using native modules or web sdk


npm install --save react-redux-firebase

This assumes you are using npm as your package manager.

If you're not, you can access the library on unpkg, download it, or point your package manager to it. Theres more on this in the Builds section below.

Older Versions

Interested in support for versions of react-redux before v6 or the new react context API? Checkout the v2.*.* versions (installed through npm i --save react-redux-firebase^@2.5.0).


Include firebaseReducer (reducer) while creating your redux store then pass dispatch and your firebase instance to ReactReduxFirebaseProvider (context provider):

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import firebase from 'firebase/app'
import 'firebase/auth'
// import 'firebase/firestore' // <- needed if using firestore
// import 'firebase/functions' // <- needed if using httpsCallable
import { createStore, combineReducers, compose } from 'redux'
import {
} from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const fbConfig = {}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users'
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB

// Initialize firebase instance

// Initialize other services on firebase instance
// firebase.firestore() // <- needed if using firestore
// firebase.functions() // <- needed if using httpsCallable

// Add firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseReducer
  // firestore: firestoreReducer // <- needed if using firestore

// Create store with reducers and initial state
const initialState = {}
const store = createStore(rootReducer, initialState)

const rrfProps = {
  config: rrfConfig,
  dispatch: store.dispatch
  // createFirestoreInstance // <- needed if using firestore

// Setup react-redux so that connect HOC can be used
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Todos />

render(<App />, document.getElementById('root'))

The Firebase instance can then be grabbed from context within your components (withFirebase and firebaseConnect Higher Order Components provided to help):

Add Data

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

export default function Todos() {
  const firebase = useFirebase()

  function addSampleTodo() {
    const sampleTodo = { text: 'Sample', done: false }
    return firebase.push('todos', sampleTodo)

  return (
      <h1>New Sample Todo</h1>
      <button onClick={addSampleTodo}>Add</button>

Load Data (listeners automatically managed on mount/unmount)

import React from 'react'
import PropTypes from 'prop-types'
import { useSelector } from 'react-redux'
import { useFirebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'

export default function Todos() {
    'todos' // { path: '/todos' } // object notation

  const todos = useSelector(state => state.firebase.ordered.todos)

  if (!isLoaded(todos)) {
    return <div>Loading...</div>

  if (isEmpty(todos)) {
    return <div>Todos List Is Empty</div>

  return (
        {Object.keys(todos).map((key, id) => (
          <TodoItem key={key} id={id} todo={todos[key]} />

Queries Based On Route Params

It is common to make a detail page that loads a single item instead of a whole list of items. A query for a specific Todos can be created using

import React from 'react'
import PropTypes from 'prop-types'
import { get } from 'lodash'
import { useSelector } from 'react-redux'
import { useFirebaseConnect } from 'react-redux-firebase'
import { useParams } from 'react-router-dom'

export default function Todo() {
  const { todoId } = useParams() // matches todos/:todoId in route

    { path: `todos/${todoId}` } // create todo listener
    // `todos/${props.params.todoId}` // equivalent string notation

  const todo = useSelector(
    ({ firebase: { data } }) => data.todos && data.todos[todoId]

  function updateTodo() {
    return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })

  return (

Load Data On Click

import React from 'react'
import { useSelector } from 'react-redux'
import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'

function TodosList() {
  const todos = useSelector(state => state.firebase.ordered.todos)

  if (!isLoaded(todos)) {
    return <div>Loading...</div>

  if (isEmpty(todos)) {
    return <div>Todos List Is Empty</div>

  return (
      {Object.keys(todos).map((key, id) => (
        <TodoItem key={key} id={id} todo={todos[key]} />

function Todos() {
  const firebase = useFirebase()

  return (
      <EnhancedTodosList />
      <button onClick={() => firebase.watchEvent('value', 'todos')}>
        Load Todos

// Export enhanced component
export default Todos


If you plan to use Firestore, you should checkout redux-firestore. It integrates nicely with react-redux-firebase and it allows you to run Real Time Database and Firestore along side each other.

react-redux-firebase provides the firestoreConnect HOC (similar to firebaseConnect) for easy setting/unsetting of listeners.

Currently react-redux-firebase still handles auth when using redux-firestore - The future plan is to also have auth standalone auth library that will allow the developer to choose which pieces they do/do not want.


See full documentation at


Real World Applications

If you would like a project added to this section please reach out over gitter

Examples Folder

Examples folder is broken into two categories snippets and complete. /complete contains full applications that can be run as is, where as /snippets contains small amounts of code to highlight specific functionality (dev tools and deps not included).

State Based Query Snippet

Snippet showing querying based on data in redux state. One of the more common examples is querying based on the current users auth UID.

Decorators Snippet

Snippet showing how to use decorators to simplify connect functions (redux's connect and react-redux-firebase's firebaseConnect)

Simple App Example

A simple example that was created using create-react-app's. Shows a list of todo items and allows you to add to them.

Material App Example

An example that user Material UI built on top of the output of create-react-app's eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to


Join us on the redux-firebase gitter.


View docs for recipes on integrations with:

Starting A Project


generator-react-firebase is a yeoman generator uses react-redux-firebase when opting to include redux.

CRA Template

cra-template-rrf is a create-react-app template with react-redux-firebase included

Complete Examples

The examples folder contains full applications that can be copied/adapted and used as a new project.


Please visit the FAQ section of the docs


Most commonly people consume Redux Firestore as a CommonJS module. This module is what you get when you import redux in a Webpack, Browserify, or a Node environment.

If you don't use a module bundler, it's also fine. The redux-firestore npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script> tag on the page. The UMD builds make Redux Firestore available as a window.ReactReduxFirebase global variable.

It can be imported like so:

<script src="../node_modules/react-redux-firebase/dist/react-redux-firebase.min.js"></script>
<script src="../node_modules/redux-firestore/dist/redux-firestore.min.js"></script>
<!-- or through cdn: <script src=""></script> -->
<!-- or through cdn: <script src=""></script> -->
<script>console.log('react redux firebase:', window.ReactReduxFirebase)</script>

Note: In an effort to keep things simple, the wording from this explanation was modeled after the installation section of the Redux Docs.


This project exists thanks to all the people who contribute.


Thank you to all our backers! 🙏

You can’t perform that action at this time.