Discussion of all things Redux and Firebase (offical room of react-redux-firebase)
Hello all! Im having an issue where my queries are taking a long time (feels like they are being blocked, running synchronously ) for example on a webpage load I might have 3-4 components load with firestoreconnect i.e.
{
collection: 'users',
where: [
['projectId', '==', `${props.match.params.spaceId}`],
[`deletedAt`, '==', 0]
],
storeAs: `workspaceMembers.${props.match.params.spaceId}`
}
There's times when the view tasks around 45 secs - 3 mins until the "isLoaded" flag becomes true. If any one has had similar issues i'd love to learn how you fixed this.
export default combineReducers({
firestore: firestoreReducer,
firebase: firebaseReducer,
activities: activityReducer,
});
Hi, I can't seem to get populate to work.
I've followed the official examples on it - defined an enhance function outside of the App function and did export default enhance(App)
at the end of the file, yet when I access the data in the store the owner
keys in each todo from todos
aren't replaced with the appropriate data. Does anyone have a working example app to share?
const fb = useSelector(state => state.firebase.data); console.log(fb)
both the owners and todos are already loaded (without me needing to call useFirebaseConnect('todos'); useFirebaseConnect('owners');
.
getFirebase().firestore
as that doesn't exist, so how would I be able to query data from firestore if I'm not inside the component scope but in a thunk function? You seem to have a recipe for thunks but only for firebase, not firestore.
import { init } from '@rematch/core'
import * as models from './models'
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
const config = {
//... firebase config object
}
if (typeof window !== 'undefined') {
firebase.initializeApp(config)
const db = firebase.firestore()
//... localhost setup for firestore emulator
}
const store = init({
models,
redux: {
reducers: {
firebase: firebaseReducer,
firestore: firestoreReducer,
},
}
})
export default store
import React from "react"
import { Provider, useSelector } from "react-redux"
import { getPersistor } from '@rematch/persist'
import { PersistGate } from 'redux-persist/lib/integration/react'
import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'
import firebase from 'firebase/app'
import store from 'src/rematch'
import Loading from 'src/components/UI/Loading/Loading'
const persistor = getPersistor()
const onBeforeLift = () => {
// console.log('PersistGate.onBeforeLift')
}
const rrfConfig = {
userProfile: 'users',
enableClaims: true,
useFirestoreForProfile: true
}
export const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
const AuthIsLoaded = ({ children }) => {
const auth = useSelector(state => state.firebase.auth)
if (!isLoaded(auth)) return <Loading />;
return children
}
export default ({ element }) => (
<Provider store={store}>
<PersistGate
loading={<Loading />}
onBeforeLift={onBeforeLift}
persistor={persistor}>
<ReactReduxFirebaseProvider {...rrfProps}>
<AuthIsLoaded>
{element}
</AuthIsLoaded>
</ReactReduxFirebaseProvider>
</PersistGate>
</Provider>
)
export default {
state: {
count: 0
},
reducers: {
updateCount(state, value) {
return { ...state, count: value }
}
},
effects: dispatch => ({
async getCounts(payload, rootState) {
//... do async stuff
},
})
}
Hello
Any ideas why this only works without the isCompleted
check?
useFirestoreConnect(() => [
{
collection: `Firms/${firmId}/activities`,
where: [
['clientId', '==', client.id],
['type', '==', 'task'],
['isCompleted', '==', 'false'], // Works if I remove this, but doesn't get the data I want
],
storeAs: `${userId}/clients/${client.id}/incompleteTasks`,
},
]);
right now it returns []
Hi, how can I wait for data loading before putting the values into a state? I want to retrieve data and present a form where the data can be manipulated by the user. It looks something like this:
useFirestoreConnect([
{
collection: auth.uid,
doc: profile,
storeAs: 'profile',
},
]);
const profile = useSelector((state) => state.firestore.data['profile']);
const [name, setName] = useState(profile.name);
I get an error that 'profile.name' is not defined, probably because the data is not yet loaded. But I can't use isLoaded because of the useState.
If I do a setName(profile.name)
after the isLoaded check I get an infinite render error.
createUser
function to provision a user with a username+password and specify things like firstname, lastname, email in the profile payload. That information gets reflected in firebase auth + firestore as expected. My issue is then I call signIn with the same user+pass (so a signInWithEmailAndPassword), I successfully log in, I see the @@reactReduxFirebase/LOGIN trigger but the store profile node stays in isEmpty: true, isLoaded: false
. Is this an expected behavior? I thought the profile would load upon a successful login. Thanks for your help!
Hey I have a design decision question:
const teamId = useSelector((state) => state.firebase.data.profile.teamId);
useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})
How would you design your app to handle it knowing that team
could be undefined
which could in turn cause something like a "missing permissions error" (because of the empty string)
Only solution I found was to have dumy components just waiting on the selectors
const WaitUntilReady = () => {
const teamId = useSelector(state => firebase.data.profile.teamId)
if (!teamId) return null
return <SomeComponentWithUseFirestoreConnect teamId={teamId} />
}
const SomeComponentWithUseFirestoreConnect = ({teamId}) => {
useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})
// render something
}