Discussion of all things Redux and Firebase (offical room of react-redux-firebase)
[code] setUsersListener = (pageChange = 0, orderBy = null, orderDir = null) => {
const { firestore } = this.props;
if (this.usersListener) this.usersListener();
const { firestore } = this.props;
if (this.usersListener) this.usersListener();
console.log(`orderBy(${this.state.usersInfo.orderBy}, ${this.state.usersInfo.orderDir})`);
let realDir = orderDir ? orderDir : this.state.usersInfo.orderDir;
let q = firestore.collection('users')
.where('company.id', '==', this.state.userData.company.id)
.orderBy(
orderBy ? orderBy : this.state.usersInfo.orderBy,
realDir
);
if (pageChange > 0) {
console.log('Going to next page');
q = q
.limit(this.state.usersInfo.usersPerPage)
.startAfter(
this.state.usersInfo.snapshots[
this.state.usersInfo.snapshots.length - 1
]
);
} else if (pageChange < 0) {
console.log('Going to previous page');
q = q
.limitToLast(this.state.usersInfo.usersPerPage)
.endBefore(this.state.usersInfo.snapshots[0]);
} else {
console.log('Displaying first page', this.state.usersInfo.usersPerPage);
q = q
.limit(this.state.usersInfo.usersPerPage);
}
this.usersListener = q.onSnapshot((querySnapshot) => {
const users = querySnapshot.docs.map((doc) => {
return {
id: doc.id,
...doc.data(),
};
});
let snapshots = [];
querySnapshot.forEach((snapshot) => {
snapshots.push(snapshot);
});
this.setState({
usersInfo: {
...this.state.usersInfo,
users,
snapshots,
},
});
});
};[/code]
It needs snapshot for startAfter / endBefore but there is no snapshot in firestoreConnect function.
Hello Everyone, This is about a small social media App. I'm using RRF to pull post docs from firestore and rendering on the UI using FlatList. How do I implement pagination? Right now, the PostFeed screen is pulling in all docs from post collection, I want to pull in 50 when the screen first mounts, then 50 more when you've scrolled to the bottom or last of the first 50 posts. How do I do this using RRF or another technique? Then I also want to pulling recent posts when the FlatList has been pulled to refresh. Is there a way to render the new posts in floating thumbnails at the top of the FlatList (just like twitter)?
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.
Hello! I'm new to React-Redux-Firebase and was wondering what the best way of getting some data from a collection is? I have a collection with a few documents, but only want certain documents depending on a property they have (if the userID they have matches the userID of the logged in user). What would the best way to achieve this? Would I need to make a new reducer?
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?
Clarification - when i do
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');.
So it seems that it's a bug but I can't be sure.
How can I use firestore in a thunk? I see most functions are all about getting data in the component, but what if I want to move all of my querrying to thunks instead of out in the individual components? I cannot use
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.
Sorry that’s getFirebase().firestore()
Add getFirebase as an extraArgument to thunk as in the docs
I import getFirebase from react-redux-firebase
@rshibli I managed to implement it, however, using firestore that way doesn't give me the redux bindings, ie. the data I querry will not be stored in redux. I added redux-firestore to my config, and it works fine in the components, but it doesn't appear to have a similar method like getFirebase() in rrf. I know it's a differrent plugin, but I also understand you guys are connected (or have the same creators), and the other room isn't very active, so figured I'd ask here, maybe you know yourself, as I already have your attention :)
although i don't think i'm doing any querying in thunks, only writing to firestore.
It's a rematch specific config, so not sure how that is going to help, but you asked for it :)
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
and here is what normally goes into App.js
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>
)
I think you should be doing that in store = init({...})
or in a plugin
sorry, rematch uses models, and inside models there are effects for async functions, similar to thunks (or I just don't have enough knowledge of what thunks do), this is the structure of a typical model:
export default {
state: {
count: 0
},
reducers: {
updateCount(state, value) {
return { ...state, count: value }
}
},
effects: dispatch => ({
async getCounts(payload, rootState) {
//... do async stuff
},
})
}
:wave: all,
Recently I started using "react-redux-firebase".
I have list of items (each item has subcollection) and on user selection I take one item and store the data for its sub-collection as storeAs: 'activeItemSubcollection'
But later if I go back and choose another item, I already have some data in activeItemSubcollection, and for less then e second (while new item data is fetched) I see the old item data. Does someone knows how can I clean 'activeItemSubcollection' while moving from one component to another (also I am changing routes, if this helps)
Recently I started using "react-redux-firebase".
I have list of items (each item has subcollection) and on user selection I take one item and store the data for its sub-collection as storeAs: 'activeItemSubcollection'
But later if I go back and choose another item, I already have some data in activeItemSubcollection, and for less then e second (while new item data is fetched) I see the old item data. Does someone knows how can I clean 'activeItemSubcollection' while moving from one component to another (also I am changing routes, if this helps)
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 []
Some parts like auth are already working but I'm getting that when I try to use useFirebaseConnect
I got a collection thats available for read without login and for some reason logging out clears it from redux
Hi there! Great to have such a community here. I have a (probably newbie) question. I would like to go from plain objects from Firestore DB to more type-safe typescript classes. The official docs mention a FirestoreDataConverter. Is something similar also supported within redux-firebase / redux-firestore?
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.