firebase-connect
HOC for connecting to firebase realtime database. Based on react-redux-firebase to improve connection to firebase.
Instalation
npm install --save firebase-connect
How firebase-connect improves react-redux-firebase
- It stores received data for each
path
from realtime database as long as the component with this HOC is mounted - It merges data of any number of listeners that you'll define
- It creates property
${propName}
with received data and boolean propertyis${PropName}Loaded
that helps to define was the data loaded or not - You can set default value, that can be taken from your store or defined manually
- You can modify received data
Usage
import React PureComponent from 'react'import PropTypes from 'prop-types'import connect from 'react-redux'import firebaseConnect from 'firebase-connect' // import firestoreConnect if you using firestore @// set same props for @firestoreConnect() if you using firestore@ static propTypes = chats: PropTypesarray chatMessages: PropTypesarray // The properties below is added automatically and helps to understend // is data loading or already was loaded isChatsLoaded: PropTypesbool isChatMessagesLoaded: PropTypesbool { const chats chatMessages isChatsLoaded isChatMessagesLoaded = thisprops const isChatsAndMessagesLoaded = isChatsLoaded && isChatMessagesLoaded return isChatsAndMessagesLoaded ? <div> <div> <div>Chats:</div> <div> chats </div> <div>Active chat messages:</div> <div> chatMessages </div> </div> </div> : <div>Data is loading...</div> }
Same as using react-redux-firebase you need to include reduxFirebase
(store enhancer) and firebaseReducer
(reducer) while creating your redux store:
import React from 'react'import render from 'react-dom'import Provider from 'react-redux'import createStore combineReducers compose from 'redux'import reduxFirebase firebaseReducer reduxFirestore // <- needed if using firestore firestoreReducer // <- needed if using firestore from 'firebase-connect'import firebase from 'firebase'// import 'firebase/firestore' // <- needed if using firestore// import 'firebase/functions' // <- needed if using httpsCallable// Get firebase config (includes apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId)import firebaseConfig from 'firebase-config.json' // Initialize firebase instancefirebase // Initialize other services on firebase instance// firebase.firestore().settings({ timestampsInSnapshots: true }) // <- needed if using firestore// firebase.functions() // <- needed if using httpsCallable // Add reduxFirebase enhancer when making store creatorconst createStoreWithFirebase = createStore // Add firebase to reducersconst rootReducer = // Create store with reducers and initial stateconst initialState = const store = // Setup react-redux so that connect HOC can be usedconst App = <Provider => <Todos /> </Provider>; ;
The Firebase instance can be grabbed using getFirebase
function
(for example in actions or somewhere you can't apply the HOC)
import getFirebase from 'firebase-connect' const push = message push