react-redux-firebase
Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.
Demo
The Material Example is deployed to demo.react-redux-firebase.com.
Features
- Integrated into redux
- Out of the box support for authentication (with auto load user profile)
- Full Firebase Platform Support Including Real Time Database, Firestore, and Storage
- Automatic binding/unbinding of listeners through React Higher Order Components (
firebaseConnect
andfirestoreConnect
) - Population capability (similar to mongoose's
populate
or SQL'sJOIN
) - Support small data ( using
value
) or large datasets ( usingchild_added
,child_removed
,child_changed
) - Multiple queries types supported including
orderByChild
,orderByKey
,orderByValue
,orderByPriority
,limitToLast
,limitToFirst
,startAt
,endAt
,equalTo
- Tons of examples of integrations including
redux-thunk
andredux-observable
- Server Side Rendering Support
react-native
support using native modules or web sdk
Install
npm install --save react-redux-firebase@next
Use
Include reactReduxFirebase
in your store compose function and firebaseReducer
in your reducers:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose } from 'redux'
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import firebase from 'firebase'
// import 'firebase/firestore' // <- needed if using firestore
const firebaseConfig = {}
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users',
// useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}
// initialize firebase instance
firebase.initializeApp(config) // <- new to v2.*.*
// initialize firestore
// firebase.firestore() // <- needed if using firestore
// Add reduxReduxFirebase enhancer when making store creator
const createStoreWithFirebase = compose(
reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
// reduxFirestore(firebase) // <- needed if using firestore
)(createStore)
// Add firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseReducer,
// firestore: firestoreReducer // <- needed if using firestore
})
// Create store with reducers and initial state
const initialState = {}
const store = createStoreWithFirebase(rootReducer, initialState)
// Setup react-redux so that connect HOC can be used
const App = () => (
<Provider store={store}>
<Todos />
</Provider>
);
render(<App/>, document.getElementById('root'));
Todos component (./Todos
):
Add Data
import React from 'react'
import PropTypes from 'prop-types'
import { withFirebase } from 'react-redux-firebase'
const Todos = ({ firebase }) => {
const sampleTodo = { text: 'Sample', done: false }
const pushSample = () => firebase.push('todos', sampleTodo)
return (
<div>
<h1>Todos</h1>
<ul>
{todosList}
</ul>
<input type="text" ref="newTodo" />
<button onClick={pushSample}>
Add
</button>
</div>
)
}
export default withFirebase(Todos)
// or firebaseConnect()(Todos) if attaching listeners
Load Data (listeners managed on mount/unmount)
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
const Todos = ({ todos, firebase }) => {
// Build Todos list if todos exist and are loaded
const todosList = !isLoaded(todos)
? 'Loading'
: isEmpty(todos)
? 'Todo list is empty'
: Object.keys(todos).map(
(key, id) => (
<TodoItem key={key} id={id} todo={todos[key]}/>
)
)
return (
<div>
<h1>Todos</h1>
<ul>
{todosList}
</ul>
<input type="text" ref="newTodo" />
<button onClick={this.handleAdd}>
Add
</button>
</div>
)
}
export default compose(
firebaseConnect([
'todos' // { path: '/todos' } // object notation
]),
connect(
(state) => ({
todos: state.firebase.data.todos,
// profile: state.firebase.profile // load profile
})
)
)(Todos)
Queries Based On Props
It is common to make a detail page that loads a single item instead of a whole list of items. A query for a specific Todos
can be created using
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firebaseConnect, getVal } from 'react-redux-firebase'
// Component enhancer that loads todo into redux then into the todo prop
const enhance = compose(
firebaseConnect((props) => [
// Set listeners based on props (prop is route parameter from react-router in this case)
return [
{ path: `todos/${props.params.todoId}` }, // create todo listener
// `todos/${props.params.todoId}` // equivalent string notation
]
}),
connect(({ firebase }, props) => ({
todo: getVal(firebase, `todos/${props.params.todoId}`), // lodash's get can also be used
}))
)
const Todo = ({ todo, firebase, params }) =>
<div>
<input
name="isDone"
type="checkbox"
checked={todo.isDone}
onChange={() =>
firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })
}
/>
<span>{todo.label}</span>
</div>
// Export enhanced component
export default enhance(Todo)
Load Data On Click
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { withFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
const Todos = ({ firebase }) => {
// Build Todos list if todos exist and are loaded
const todosList = !isLoaded(todos)
? 'Loading'
: isEmpty(todos)
? 'Todo list is empty'
: Object.keys(todos).map(
(key, id) => <TodoItem key={key} id={id} todo={todos[key]}/>
)
return (
<div>
<h1>Todos</h1>
<ul>
{todosList}
</ul>
<button onClick={() => firebase.watchEvent('value', 'todos')}>
Load Todos
</button>
</div>
)
}
// Export enhanced component
export default compose(
withFirebase, // or firebaseConnect()
connect((state) => ({
todos: state.firebase.data.todos,
// profile: state.firebase.profile // load profile
}))
)(Todos)
Docs
See full documentation at react-redux-firebase.com
Examples
Examples folder is broken into two categories complete and snippets. /complete
contains full applications that can be run as is, while /snippets
contains small amounts of code to show functionality (dev tools and deps not included).
State Based Query Snippet
Snippet showing querying based on data in redux state. One of the most common examples of this is querying based on the current users auth UID.
Decorators Snippet
Snippet showing how to use decorators to simplify connect functions (redux's connect
and react-redux-firebase's firebaseConnect
)
Simple App Example
A simple example that was created using create-react-app's. Shows a list of todo items and allows you to add to them.
Material App Example
An example that user Material UI built on top of the output of create-react-app's eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to redux-firebasev3.firebaseapp.com.
Discussion
Join us on the redux-firebase gitter.
Integrations
View docs for recipes on integrations with:
- redux-firestore
- redux-thunk
- redux-observable
- redux-saga
- redux-form
- redux-auth-wrapper
- redux-persist - improved integration with
v2.0.0
- react-native
- react-native-firebase - requires
v2.0.0
Firestore
If you plan to use Firestore, you should checkout redux-firestore
. It integrates nicely with react-redux-firebase
(v2 only) and it allows you to run Real Time Database and Firestore along side each other.
react-redux-firebase
provides the firestoreConnect
HOC (similar to firebaseConnect
) for easy setting/unsetting of listeners.
Currently react-redux-firebase
still handles auth when using redux-firestore
- The future plan is to also have auth standalone auth library that will allow the developer to choose which pieces they do/do not want.
Starting A Project
Generator
generator-react-firebase is a yeoman generator uses react-redux-firebase when opting to include redux.
Complete Examples
The examples folder contains full applications that can be copied/adapted and used as a new project.
FAQ
Please visit the FAQ section of the docs
Contributors
This project exists thanks to all the people who contribute.
Backers
Thank you to all our backers! 🙏