redux-firebase

Redux bindings for Firebase

Why?

Provide Framework/library agnostic Firebase bindings for redux similar to those available in react-redux-firebase and other similar libraries.

Features

• Integrated into redux
• Support for updating and nested props
• Population capability (similar to mongoose's populate or SQL's JOIN)
• Out of the box support for authentication (with auto load user profile)
• Firebase Storage Support
• Support small data ( using value ) or large datasets ( using child_added, child_removed, child_changed )
• queries support ( orderByChild, orderByKey, orderByValue, orderByPriority, limitToLast, limitToFirst, startAt, endAt, equalTo right now )
• Automatic binding/unbinding
• Declarative decorator syntax for React components
• Tons of integrations including redux-thunk and redux-observable
• Action Types and other Constants exported for external use (such as in redux-observable)
• Firebase v3+ support
• Server Side Rendering Support
• react-native support using native modules or web sdk

Install

npm install --save redux-firebase

Use

Note: If you are just starting a new project, you may want to use v2.0.0 since it is has an even easier syntax. For clarity on the transition, view the v1 -> v2 migration guide

Include reactReduxFirebase in your store compose function and firebaseStateReducer in your reducers:

import { createStore, combineReducers, compose } from 'redux'
import { reduxFirebase, firebaseReducer } from 'react-redux-firebase'
import * as firebase from 'firebase'

// Add Firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseReducer
})

// Firebase config
const config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
}
const rfConfig = { userProfile: 'users' } // react-redux-firebase config

// initialize firebase instance
firebase.initializeApp(config) // <- new to v2.*.*

// Add reduxReduxFirebase to compose
const createStoreWithFirebase = compose(
  reduxFirebase(firebase, rfConfig), // firebase instance as first argument
)(createStore)

// Create store with reducers and initial state
const store = createStoreWithFirebase(rootReducer, initialState)

Discussion

Join us on the redux-firebase gitter.

FAQ

1. How is this different than react-redux-firebase?

   The future plan for is for react-redux-firebase to be powered by this library. redux-firebase will contain the redux specific internal logic which was originally created for react-redux-firebase. In this way, redux-firebase is front end framework agnostic,

2. How do I help?

   • Join the conversion on gitter
   • Post Issues
   • Create Pull Requests