Use Firebase with React and Redux in ES6
value
) or large datasets ( using child_added
, child_removed
, child_changed
orderByChild
, orderByKey
, orderByValue
, orderByPriority
, limitToLast
, limitToFirst
, startAt
, endAt
, equalTo
right now )$ npm install --save redux-react-firebase
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>
)
}
}
See API
You can see a complete example here
Mocha.js is used as test runner. To run the tests, run
npm run test