but the config I'm copying from the firestore example app doesn't have any code reference to persistReducer which is what I've been using..
Which version of redux-firestore you're using?
console errors to throw the circular structure error when two conditions are met:
const persistor = persistStore(store)
// AND also..
const {uid} = props
const friendsQuery = useMemo(() => ({
collection: 'users',
doc: uid,
subcollections: [{collection: 'suggested_to_rate'}],
storeAs: 'friends'
}), [uid])
useFirestoreConnect([friendsQuery]) // <- particularly here
I'm using persistor for <PersistGate> in my App.js
Hello to everyone!
I have Firebase collections like this:
phrases: {
text: string;
}
stories: {
//...
phrases: [
//DocReference To Phrase,
//DocReference To Phrase,
//...
]
}How can I load stories with phrases? I tried something like this:
const populates = (dataKey: any, originalData: any) => {
if (originalData && originalData.phrases && !originalData.phrasesIds) {
originalData.phrasesIds = originalData.phrases.map(phrase => phrase.path.split('/')[1]);
}
return [{child: 'id', root: 'phrasesIds'}];
};
const mapStateToProps = ({ firestore, settings, word, story }: TState) => ({
story: story.item,
amount: settings.amount,
data: word.data,
test: populate(firestore, 'phrases', populates as any)
});
const mapDispatchToProps = {};
const fireStoreFetch: any = (props: Props) => {
return [
{
collection: 'stories',
doc: props.story.id,
subcollections: [{ collection: 'phrases' }],
populates,
storeAs: 'phrases',
}];
};
export default compose<{}>(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect(fireStoreFetch),
)(GameScreen);But this code loads initial data ("story") instead of nested data ("phrase").
Any idea what I'm doing wrong?
hello I am trying to read data from firestore but I always get undefined heres what I am doing
const mapStateToProps = state => {
console.log(state);
return { champDropRates: state.firestore.ordered.champDropRates };
};I can see in console log champDropRates is called several times and only the last couple calls to firestore contains data. And when I try to assign champDropRates it only reads from that first firestore call which is undefined. How do I make mapStateToProps read that latest call to firestore with data instead of the first call to firestore which is empty?
Hi everyone! 👋 I'm trying to use populate with firestore in a react function component. Currently, the hook "useFirestoreConnect" from react-redux-firebase doesn't support population(?). Are there any examples that show how I might use firestore population in a function component?
@illuminist thanks for the tip! I really appreciate it 😁 I ended up doing the following which seems to work (kinda):
import React from 'react';
import { Text, View, Button, ScrollView } from 'react-native';
import Post from '../Post';
import { Container, Header, Content } from 'native-base';
import store from '../../store/mainStore';
import {
populate,
useFirestoreConnect,
} from 'react-redux-firebase';
import { useSelector } from 'react-redux';
export default function HomeScreen(props) {
const populates = [{ child: '_authorId', root: 'users' }];
const collection = 'posts';
// Attach listener for posts in Firestore
useFirestoreConnect([
{ collection, populates },
]);
// Get posts (and user data) from redux state
const populatedPostData = useSelector((state) => populate(state.firestore, collection, populates));
...
}I say "kinda" because it ends up storing the users collection in the redux store like so:
data: {
users: {
98DSJA83924UF: {
com:
{
...myUserData
}
}
}
}
I wasn't expecting the "com" key to be there, soo I'll be looking into that next
Hey, does anyone have any examples of how I might implement
useFirestoreConnect with populate? I've tried getting around the issues above, but can't auto-create listeners on the subquery or bring this data into the store without the "com" key. Maybe I'm not understanding how it should work... Any help is much appreciated! 🙏🏽
var firebaseConfig = {};
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
};
firebase.initializeApp(firebaseConfig);
firebase.firestore();
const rootReducer = combineReducers({
auth: authReducer,
lineChart: lineChartReducer,
barChart: barChartReducer,
firestore: firestoreReducer
});
const initialState = {};
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
reduxFirestore(firebase, firebaseConfig)
)
);
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
};
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<BrowserRouter>
<App />
</BrowserRouter>
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById('root')
);
class Alternative extends React.Component {
const barChartData = {
labels: barChart.map(obj => obj.month), //GIVES ERROR HERE
}
//more code
}
const mapDispatchToProps = dispatch => {
// more code
};
const mapStateToProps = state => {
console.log(state);
return {
barChart: state.firestore.ordered.barChartDb
};
};
export default compose(
firestoreConnect([{collection: 'barChartDb'}]),
connect(mapStateToProps, mapDispatchToProps)
)(Alternative);
ERROR=> TypeError: Cannot read property 'map' of undefined
Does anybody see a mistake?
class Alternative extends React.Component {
render() {
const {barChart } = this.props;
const barChartData = {
labels: barChart.map(obj => obj.month),
datasets: [
{
label: 'Delay',
data: barChart.map(obj => obj.delay)
}
]
};
return(
<Bar data={barChartData} options={foo} />
)
}
const mapDispatchToProps = dispatch => {
// more code
};
const mapStateToProps = state => {
console.log(state);
return {
barChart: state.firestore.ordered.barChartDb
};
};
export default compose(
firestoreConnect([{collection: 'barChartDb'}]),
connect(mapStateToProps, mapDispatchToProps)
)(Alternative);
The react class in more detail looks something like this
because i have already destructure on top