redux-react-firebase v2.6.1
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 ( usingchild_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
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago