Skip to content
🔥 🐣 Firebase + Redux for ReactJS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist chore: dist May 17, 2017
docs Add GIF. Apr 22, 2016
src refactor: split on string May 17, 2017
.publishrc chore: add publish-please Aug 11, 2016
.travis.yml chore(release): 1.1.0 Feb 9, 2017

🔥 🐣 firedux NPM version Build Status Firebase React

Firebase + Redux for React


Firedux (fiery·ducks) wraps the Firebase JavaScript API to dispatch Redux actions that optimisically & immediately read/write to an in-memory subset of your data from Firebase, then asynchronously pull & push data in the background.

Also supports some authentication methods and actions.

Works well with React.

Support firedux and fiery ducks like Magmar!



Install with npm

npm i --save firedux (copy)

You'll need to configure redux-thunk on your Redux store.

The browser build (dist/src/index.browser.js) should support UMD (AMD, CommonJS, and globals). If using globals with Firebase 2.x you may need to alias Firebase as firebase prior to loading this module. Other shims may be necessary. Please report any issues or findings.


  • firebase
  • lodash: as _ if using globals
  • updeep
  • Promise: polyfill globally as needed


See my TodoMVC example, the tests, and below:

import Firedux from 'firedux'
import Firebase from 'firebase'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'

 * For Firebase 2.x, e.g.:
var ref = new Firebase('')

 * Or for Firebase 3.x:, e.g.:
var app = Firebase.initializeApp({
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: ''
  // ...
var ref = app.database().ref()

 * Then create your Firedux instance, passing it your database reference as `ref`.
const firedux = new Firedux({

  // Optional:
  omit: ['$localState'] // Properties to reserve for local use and not sync with Firebase.

const reducer = combineReducers({
  firedux: firedux.reducer()
  // Your other reducers...

// Create store with middleware, including thunk.

const middleware = applyMiddleware(
  // Your other middleware...

const store = createStore(reducer, middleware)

// Set dispatch function from store on your Firedux instance.
firedux.dispatch = store.dispatch

// Later, you can subscribe to state.
store.subscribe(() => {
  const state = store.getState()
  const { data, authData } = state.firedux
  console.log('Test data from Firebase:', data.test)

  // Lazy loading
  // e.g. once authorized, get user data:
  if (authData && authData.auth && authData.auth.uid) {`users/${authData.auth.uid}`)

// Watch a path:'users/joe')
.then(({snapshot}) => {})
// Note: this promise will only resolve on the first value,
//  but it'll keep syncing on all value updates.

// Get:
.then(({snapshot}) => {})

// Set:
firedux.set('test', true)
.then(({value}) => {})
// == true

// Update (merging set):
firedux.update('users/joe', { job: 'developer' })
.then(({value}) => {})
// == { name: 'Joe', job: 'developer' }

// Push (to a collection):
firedux.push('users', { name: 'Jane' }, (id) => {
  // The ID is generated locally immediately,
  // so you can get it before the push with this callback.
  // id == '-K95Cjx-caw2uSNsFJiI'
.then((id) => {})
//['-K95Cjx-caw2uSNsFJiI'] == { name: 'Jane' }

// Remove:
.then(() => {})
//['joe'] == undefined

// Auth

// Init
// Call this when your app starts, to get existing session, and listen for auth changes.
// See Login state below.

// Login
  email: '',
  password: '123'
// state.firedux.authData == { auth: { uid: '123' } }
//  etc. `authData` per
// or state.firedux.authError == Error

// Logout
// state.firedux.authData == null

// To handle some unsupported features, you can get access to the underlying Firebase instance via:
// e.g. turn off a watch:
// or login with OAuth:
firedux.ref.authWithOAuthPopup("twitter", (error, authData) => {
  store.dispatch({type: 'FIREBASE_LOGIN', error, authData})


This component includes tracking via Google Analytics. The purpose is to better understand how and where it's used, as a guide for development.

To opt-out of this tracking, before loading the script on your page, use the global options in JavaScript, with noTrack set to true, as follows:

  noTrack: true

Running tests

Install dev dependencies:

$ npm i -d && npm test


Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

In lieu of a formal styleguide, please:

  • Take care to maintain the existing coding style
  • Add unit tests for any new or changed functionality
  • Re-build documentation with verb-cli before submitting a pull request.


Anders D. Johnson


Copyright © 2015-2016 Anders D. Johnson Released under the MIT license.

This file was generated by verb-cli on August 6, 2016.

You can’t perform that action at this time.