Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
react-redux-firebase
Advanced tools
Redux integration for Firebase. Comes with a Higher Order Components for use with React.
Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.
If you are starting a new project and/or are not required to have your Firebase data loaded into redux, you might want to give reactfire a try before trying react-redux-firebase. I wrote up a quick medium article explaining a bit about how, why, and showing how to start a new project with these tools.
The Material Example is deployed to demo.react-redux-firebase.com.
useFirebaseConnect
, useFirestoreConnect
) or Higher Order Components (firebaseConnect
and firestoreConnect
)populate
or SQL's JOIN
)value
) or large datasets ( using child_added
, child_removed
, child_changed
)orderByChild
, orderByKey
, orderByValue
, orderByPriority
, limitToLast
, limitToFirst
, startAt
, endAt
, equalTo
redux-thunk
and redux-observable
react-native
support using native modules or web sdknpm install --save react-redux-firebase
This assumes you are using npm as your package manager.
If you're not, you can access the library on unpkg, download it, or point your package manager to it. Theres more on this in the Builds section below.
Interested in support for versions of react-redux
before v6 or the new react context API? Checkout the v2.*.*
versions (installed through npm i --save react-redux-firebase^@2.5.0
).
Include firebaseReducer
(reducer) while creating your redux store then pass dispatch and your firebase instance to ReactReduxFirebaseProvider
(context provider):
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import firebase from 'firebase/app'
import 'firebase/database'
import 'firebase/auth'
// import 'firebase/firestore' // <- needed if using firestore
// import 'firebase/functions' // <- needed if using httpsCallable
import { createStore, combineReducers, compose } from 'redux'
import {
ReactReduxFirebaseProvider,
firebaseReducer
} from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore
const fbConfig = {}
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users'
// useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}
// Initialize firebase instance
firebase.initializeApp(fbConfig)
// Initialize other services on firebase instance
// firebase.firestore() // <- needed if using firestore
// firebase.functions() // <- needed if using httpsCallable
// 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 = createStore(rootReducer, initialState)
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch
// createFirestoreInstance // <- needed if using firestore
}
// Setup react-redux so that connect HOC can be used
function App() {
return (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Todos />
</ReactReduxFirebaseProvider>
</Provider>
)
}
render(<App />, document.getElementById('root'))
The Firebase instance can then be grabbed from context within your components (withFirebase
and firebaseConnect
Higher Order Components provided to help):
Add Data
import React from 'react'
import { useFirebase } from 'react-redux-firebase'
export default function Todos() {
const firebase = useFirebase()
function addSampleTodo() {
const sampleTodo = { text: 'Sample', done: false }
return firebase.push('todos', sampleTodo)
}
return (
<div>
<h1>New Sample Todo</h1>
<button onClick={addSampleTodo}>Add</button>
</div>
)
}
Load Data (listeners automatically managed on mount/unmount)
import React from 'react'
import PropTypes from 'prop-types'
import { useSelector } from 'react-redux'
import { useFirebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
export default function Todos() {
useFirebaseConnect([
'todos' // { path: '/todos' } // object notation
])
const todos = useSelector((state) => state.firebase.ordered.todos)
if (!isLoaded(todos)) {
return <div>Loading...</div>
}
if (isEmpty(todos)) {
return <div>Todos List Is Empty</div>
}
return (
<div>
<ul>
{Object.keys(todos).map((key, id) => (
<TodoItem key={key} id={id} todo={todos[key]} />
))}
</ul>
</div>
)
}
Queries Based On Route Params
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 { get } from 'lodash'
import { useSelector } from 'react-redux'
import { useFirebaseConnect, useFirebase } from 'react-redux-firebase'
import { useParams } from 'react-router-dom'
export default function Todo() {
const { todoId } = useParams() // matches todos/:todoId in route
const firebase = useFirebase()
useFirebaseConnect([
{ path: `todos/${todoId}` } // create todo listener
// `todos/${todoId}` // equivalent string notation
])
const todo = useSelector(
({ firebase: { data } }) => data.todos && data.todos[todoId]
)
function updateTodo() {
return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })
}
return (
<div>
<input
name="isDone"
type="checkbox"
checked={todo.isDone}
onChange={updateTodo}
/>
<span>{todo.label}</span>
</div>
)
}
Load Data On Click
import React from 'react'
import { useSelector } from 'react-redux'
import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
function TodosList() {
const todos = useSelector((state) => state.firebase.ordered.todos)
if (!isLoaded(todos)) {
return <div>Loading...</div>
}
if (isEmpty(todos)) {
return <div>Todos List Is Empty</div>
}
return (
<ul>
{Object.keys(todos).map((key, id) => (
<TodoItem key={key} id={id} todo={todos[key]} />
))}
</ul>
)
}
export default function Todos() {
const firebase = useFirebase()
return (
<div>
<h1>Todos</h1>
<EnhancedTodosList />
<button onClick={() => firebase.watchEvent('value', 'todos')}>
Load Todos
</button>
</div>
)
}
If you plan to use Firestore, you should checkout redux-firestore
. It integrates nicely with react-redux-firebase
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.
See full documentation at react-redux-firebase.com
Examples folder is broken into two categories snippets and complete. /complete
contains full applications that can be run as is, where as /snippets
contains small amounts of code to highlight specific functionality (dev tools and deps not included).
Snippet showing querying based on data in redux state. One of the more common examples is querying based on the current users auth UID.
Snippet showing how to use decorators to simplify connect functions (redux's connect
and react-redux-firebase's firebaseConnect
)
A simple example that was created using create-react-app's. Shows a list of todo items and allows you to add to them.
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.
Join us on the redux-firebase gitter.
View docs for recipes on integrations with:
generator-react-firebase is a yeoman generator uses react-redux-firebase when opting to include redux.
cra-template-rrf is a create-react-app template with react-redux-firebase included
The examples folder contains full applications that can be copied/adapted and used as a new project.
Please visit the FAQ section of the docs
Most commonly people consume Redux Firestore as a CommonJS module. This module is what you get when you import redux in a Webpack, Browserify, or a Node environment.
If you don't use a module bundler, it's also fine. The redux-firestore npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script>
tag on the page. The UMD builds make Redux Firestore available as a window.ReactReduxFirebase
global variable.
It can be imported like so:
<script src="../node_modules/react-redux-firebase/dist/react-redux-firebase.min.js"></script>
<script src="../node_modules/redux-firestore/dist/redux-firestore.min.js"></script>
<!-- or through cdn: <script src="https://unpkg.com/react-redux-firebase@latest/dist/react-redux-firebase.min.js"></script> -->
<!-- or through cdn: <script src="https://unpkg.com/redux-firestore@latest/dist/redux-firestore.min.js"></script> -->
<script>
console.log('react redux firebase:', window.ReactReduxFirebase)
</script>
Note: In an effort to keep things simple, the wording from this explanation was modeled after the installation section of the Redux Docs.
This project exists thanks to all the people who contribute.
FAQs
Redux integration for Firebase. Comes with a Higher Order Components for use with React.
The npm package react-redux-firebase receives a total of 4,211 weekly downloads. As such, react-redux-firebase popularity was classified as popular.
We found that react-redux-firebase demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.