Use Firebase with React and Redux in ES6
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
source
test
.eslintignore
.eslintrc
.gitignore
.npmignore
API.md
CHANGELOG.md
LICENSE.md
README.md
package.json

README.md

redux-react-firebase

Use Firebase with React and Redux in ES6

Features

  • Suport for Firebase v3 (for older Firebase version use Branch 1.x)
  • Integrated into redux
  • 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
  • Support for nested props
  • Out of the box support for authentication (with auto load user profile)
  • Lots of helper functions

Install

$ npm install --save redux-react-firebase

Use

Include redux-react-firebase in your store

import {createStore, combineReducers, compose} from 'redux'
import {reduxReactFirebase, firebaseStateReducer} from 'redux-react-firebase'

const rootReducer = combineReducers({
  firebase: firebaseStateReducer
})
const config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
}
const createStoreWithFirebase = compose(
    reduxReactFirebase(config),
)(createStore)


store = createStoreWithFirebase(rootReducer, initialState)

In the components

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {firebase, helpers} from 'redux-react-firebase'

const {isLoaded, isEmpty, dataToJS} = helpers

@firebase( [
  'todos'
])
@connect(
  ({firebase}) => ({
    todos: dataToJS(firebase, 'todos'),
  })
)
class Todos extends Component {

  render() {
    const {firebase, todos} = this.props;


    const todosList = (!isLoaded(todos)) ?
                          'Loading'
                        : (isEmpty(todos) ) ?
                              'Todo list is empty'
                            : _.map(todos, (todo, id) => (<TodoItem key={id} id={id} todo={todo}/>) )

    return (
      <div>
        <h1>Todos</h1>
        <ul>
          {todosList}
        </ul>
        <input type="text" ref="newTodo" />
        <button onClick={handleAdd}>Add</button>
      </div>
    )
  }

}

API

See API

Example

You can see a complete example here

Tests

Mocha.js is used as test runner. To run the tests, run

npm run test

Contributors