Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Michael Lake
    @mlake
    hey folks - I been using redux firestore for awhile, but not that i'm converting everything to react hooks, i'm using firestoreConnect for the first time
    it seems to work except that I get an error in the console like this:
    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)
    any ideas what might be causing this?
    illuminist
    @illuminist
    Looks like you're trying to save firebase instance into persistent store. You should check that what are you putting in redux-persist
    Michael Lake
    @mlake
    thanks for the pointer..
    do think it might be this:
    const rootReducer = combineReducers({
      firebase: firebaseReducer,
      firestore: firestoreReducer,
      tripCriteria,
      tripResults,
      selectedCurrency,
      authWall,
      onboarding,
      selectedTrip,
      userData,
      embeddedProfile
    })
    Michael Lake
    @mlake
    that whole createStore.js has always been a little difficult for me to digest..
    Michael Lake
    @mlake
    so in copying the createStore.js from the example, I've got the error to go away, but I've got some other stuff in my old config (which I admittedly don't entirely comprehend...) that's needed because some other things are breaking..
    like..where can I use my persistConfig?
    const persistConfig = {
      key: 'root',
      storage,
      blacklist: ['tripResults', 'embeddedProfile']
    }
    illuminist
    @illuminist
    Try to blacklist firebase and firestore too?
    Michael Lake
    @mlake
    I had tried that to no avail..
    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..
    illuminist
    @illuminist
    which example are you using?
    illuminist
    @illuminist
    Ok checking it now
    Which version of redux-firestore you're using?
    Michael Lake
    @mlake
    "redux-firestore": "^0.10.0",
    illuminist
    @illuminist
    What returned from makeRootReducer() should be the same as rootReducer, you should be able to pass that into the second argument of persistReducer
    Michael Lake
    @mlake
    yeah, I had tried that...I'm wading through the mess now..
    Michael Lake
    @mlake
    narrowed the problem..
    console errors to throw the circular structure error when two conditions are met:
    Michael Lake
    @mlake
    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
    Michael Lake
    @mlake
    aha, I think I found it...
    image.png
    Michael Lake
    @mlake
    so..i feel redux-firestore should have given an error telling me that i was returning a DocumentRef and that those aren't allowed..
    illuminist
    @illuminist
    We can't find the way to handle none plain object yet, such as firestore.Timestamp and Refs
    Michael Lake
    @mlake
    also..how come when HMR does a full reload, all of my stuff requested in "useFirestoreConnect" gets emptied?
    illuminist
    @illuminist
    Is other state in redux get reset too?
    Michael Lake
    @mlake
    nope
    dmitryyacenko
    @dmitryyacenko

    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?

    Lestley Gabo
    @lestgabo

    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?

    Lestley Gabo
    @lestgabo
    ^ nevermind I figured it out. redux does auto reload if a value changes. It was my parsing that was wrong, I was parsing for objects instead of an array.
    Pedro Specter
    @pedrospecter_twitter
    Hey @lestgabo how did you solve it? I am actually having the same problem
    Dustin Palea
    @Dkpalea
    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
    @illuminist
    @Dkpalea It should work exactly like firestoreConnect work. You can refer to firestoreConnect usage for useFirestoreConnect populate function.
    Dustin Palea
    @Dkpalea

    @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

    Dustin Palea
    @Dkpalea
    Update: I'm realizing that it's not creating subqueries, so there are no listeners for user data
    Dustin Palea
    @Dkpalea
    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! 🙏🏽
    illuminist
    @illuminist
    @Dkpalea Does your key contain .com? It's going to mess up with lodash's helper function.
    Ryan Poh
    @ryanpoh
    
    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')
    );
    Ryan Poh
    @ryanpoh
    
    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
    illuminist
    @illuminist
    Is that a question that wants an answer?
    Ryan Poh
    @ryanpoh
    Hello everyone, I've been trying to resolve this for the past few hours. I'm just trying to read some data from Firestore
    Does anybody see a mistake?
    illuminist
    @illuminist
    Maybe. Where is barChartyou're trying to access from?