redux-persist/createPersistoid: error serializing state TypeError: Converting circular structure to JSON
--> starting at object with constructor 'FirebaseAppImpl'
| property 'firebase_' -> object with constructor 'Object'
| property 'apps' -> object with constructor 'Array'
--- index 0 closes the circle
at JSON.stringify (<anonymous>)
at defaultSerialize (createPersistoid.js:126)
at processNextKey (createPersistoid.js:71)const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
tripCriteria,
tripResults,
selectedCurrency,
authWall,
onboarding,
selectedTrip,
userData,
embeddedProfile
})const persistConfig = {
key: 'root',
storage,
blacklist: ['tripResults', 'embeddedProfile']
}
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
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?
@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