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 using
firebaseConnect
Higher Order Component - Population capability (similar to mongoose's
populate
or SQL'sJOIN
) - 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 ) - 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
Other Versions
The above install command will install the @latest
tag. You may also use the following tags when installing to get different versions:
@next
- Most possible up to date code. Currently, points to active progress withv2.0.0-*
pre-releases. Warning: Syntax is different than current stable version.
Be aware of changes when using a version that is not tagged @latest
. Please report any issues you encounter, and try to keep an eye on the releases page for updates.
Use
Note: If you are just starting a new project, you may want to use v2.0.0
since it 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 React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose } from 'redux'
import { reactReduxFirebase, firebaseStateReducer } from 'react-redux-firebase'
import Todos from './Todos' // find code below
const firebaseConfig = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
}
const reduxFirebaseConfig = { userProfile: 'users' }
// Add reactReduxFirebase store enhancer
const createStoreWithFirebase = compose(
reactReduxFirebase(firebaseConfig, reduxFirebaseConfig),
)(createStore)
// Add firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseStateReducer
})
// 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
):
import React from 'react'
import PropTypes from 'prop-types' // can also come from react if react <= 15.4.0
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firebaseConnect, isLoaded, isEmpty, toJS } from 'react-redux-firebase'
const Todos = ({ todos }) => (
<div>
<h1>Todos</h1>
<ul>
{
!isLoaded(todos)
? 'Loading'
: isEmpty(todos)
? 'Todo list is empty'
: toJS(todos).map(
(key, id) => (
<TodoItem key={key} id={id} todo={todos[key]}/>
)
)
}
</ul>
</div>
)
Todos.propTypes = {
todos: PropTypes.object,
firebase: PropTypes.object // comes from firebaseConnect
}
export default compose(
firebaseConnect([
'todos' // { path: 'todos' } // object notation
]),
connect((state) => ({
todos: state.firebase.getIn(['todos']), // in v2 todos: state.firebase.data.todos
}))
)(Todos)
Alternatively, if you choose to use decorators:
@firebaseConnect([
'todos' // { path: 'todos' } // object notation
])
@connect(
({ firebase }) => ({
todos: state.firebase.getIn(['todos']) // in v2 todos: firebase.data.todos
})
)
export default class Todos extends Component {
}
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-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
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
-
How is this different than
redux-react-firebase
?This library was actually originally forked from redux-react-firebase, but adds extended functionality such as:
- populate functionality (similar to mongoose's
populate
or SQL'sJOIN
) react-native
support (web/js or native modules throughreact-native-firebase
)- tons of integrations
profileFactory
- change format of profile stored on FirebasegetFirebase
- access to firebase instance that fires actions when methods are called- access to firebase's
storage
andmessaging
services uniqueSet
method helper for only setting if location doesn't already exist- Object or String notation for paths (
[{ path: '/todos' }]
equivalent to['/todos']
) - Action Types and other Constants are exposed for external usage (such as with
redux-observable
) - Server Side Rendering Support
- Complete Firebase Auth Integration including
signInWithRedirect
compatibility for OAuth Providers
Well why not combine?
I have been talking to the author of redux-react-firebase about combining, but we are not sure that the users of both want that at this point. Join us on the redux-firebase gitter if you haven't already since a ton of this type of discussion goes on there.
redux-firebase?
What aboutThe author of redux-firebase has agreed to share the npm namespace! Currently the plan is to take the framework agnostic redux core logic of
react-redux-firebase
and place it intoredux-firebase
). Eventuallyreact-redux-firebase
and potentially other framework libraries can depend on that core (the newredux-firebase
). - populate functionality (similar to mongoose's
-
Why use redux if I have Firebase to store state?
This isn't a super quick answer, so I wrote up a medium article to explain
-
Where can I find some examples?
- Recipes Section of the docs
- examples folder contains complete example apps as well as useful snippets
-
How does
connect
relate tofirebaseConnect
? -
How do I help?
- Join the conversion on gitter
- Post Issues
- Create Pull Requests
Contributors
This project exists thanks to all the people who contribute.
Backers
Thank you to all our backers! 🙏