Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Reza
    @rshibli
    @benomatis I'm not a contributor to these libraries, just a user. I may be able to help if you can show me how you set up your store.
    although i don't think i'm doing any querying in thunks, only writing to firestore.
    benomatis
    @benomatis
    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
    benomatis
    @benomatis
    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>
    )
    Reza
    @rshibli
    where are you setting up redux thunk as a middleware?
    I think you should be doing that in store = init({...})
    or in a plugin
    Reza
    @rshibli
    are you sure you should be using redux-thunk with rematch?
    benomatis
    @benomatis
    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
            },
        })
    }
    Reza
    @rshibli
    OK, sorry I thought your question was about redux-thunk, I don't think I can help you.
    benomatis
    @benomatis
    ok, thanks anyway
    Јане Џумеркоски
    @janedzumerko
    :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)
    benomatis
    @benomatis
    how do I clear firestore (!) requesting and requested statuses? It looks like they remain, even though I do call the CLEAR_DATA actionType
    Јане Џумеркоски
    @janedzumerko
    @benomatis how do you use CLEAR_DATA actionType to clear firestore data ?
    benomatis
    @benomatis
    @janedzumerko dispatch({ type: actionTypes.CLEAR_DATA })
    Јане Џумеркоски
    @janedzumerko
    Did you extended the requestedReducer with CLEAR_DATA ?
    benomatis
    @benomatis
    @janedzumerko I honestly don't know how I'd go about to do that.
    Elad Karni
    @EladKarni

    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 []

    benomatis
    @benomatis
    @EladKarni could it be that you look for a string as a value instead of a boolean?, ie. you have 'false' (with single quotes) while a boolean would be false (no quotes)... just a wild guess
    Marsunpaisti
    @Marsunpaisti
    Any idea why I'm getting Uncaught Error: FIREBASE FATAL ERROR: Cannot parse Firebase url please use https://<YOUR FIREBASE>.firebaseio.com even though my firebaseconfig is copypasted from the console?
    Some parts like auth are already working but I'm getting that when I try to use useFirebaseConnect
    Marsunpaisti
    @Marsunpaisti
    hell, even when I access the database url with my browser I can get data out with http requests
    Marsunpaisti
    @Marsunpaisti
    ah, updated the firebase package ( from yesterdays version ) and it works
    Marsunpaisti
    @Marsunpaisti
    Is there a reason that firebase.logout() clears data from firebase.data even though said data is not gated behind authentication
    I got a collection thats available for read without login and for some reason logging out clears it from redux
    Elad Karni
    @EladKarni

    @EladKarni could it be that you look for a string as a value instead of a boolean?, ie. you have 'false' (with single quotes) while a boolean would be false (no quotes)... just a wild guess

    That was it!!! Clearly I'm just an idiot lol

    Tim Arnold
    @TMcLoone
    is there a way to clear any firestore listeners (set up with useFirestoreConnect) on logout?
    Matthias Schmid
    @mschmid
    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?
    benomatis
    @benomatis
    Cloud Functions don't work at all, so it seems, I had to create a separate hook only to initiate functions, and so it's only available in a component scope, not outside (ie. in a thunk). Is this by design? My use case is simply to execute callable functions.
    Alex
    @a-zen

    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.

    mcardinalupgrade
    @mcardinalupgrade
    Hello, I've been stuck on something unexpected for the past couple of hours... I am using the 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!
    BahaaAS
    @BahaaAS
    This message was deleted
    7 replies
    Frode Sjovatsen
    @fsjovatsen
    Hello! Is there a way to trigger some code when a @@reduxFirestore/DOCUMENT_MODIFIED action is triggered. When I add/update a document in Firestore I have triggers server side that updates other documents. I want to be able to visualize that in my app.
    Benjamin
    @benjaminshafii

    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
    }
    Nicole Latifi
    @NicoleLatifi

    Hello! First time posting here.

    We've been stuck on an error for several days now... Since updating react-redux-firebase from ^2.1.6 to ^3.9.0, we're getting the error TypeError: store.getState is not a function. when trying to build on iOs. This error is occurring in the second firestoreConnect:

    export default compose<any>(
     connect(
        (state: State): Partial<MVProps> => ({
          myUserId: get(state, 'user.profile.id'),
          villagers: getFromIds(state.users, state.users.villagers),
        })
      ),
      firestoreConnect(props => [
        {
          collection: 'rooms',
          where: [
            [`type`, '==', 'userToUser'],
            [`users.${props.myUserId}`, '==', true],
          ],
          storeAs: 'myRooms',
        },
      ]),
      firestoreConnect((_, store) => {
        const state = store.getState() as State;
        return flatten(
          defaultTo(state.firestore.ordered.myRooms, []).map((r: Room) =>
            keys(r.users).map((userId: string) => ({
              collection: 'users',
              where: ['userId', '==', userId],
              storeAs: 'myRoomsUsers',
            }))
          )
        );
      }),
      connect(
        (state: State): Partial<MVProps> => ({
          myRooms: state.firestore.ordered.myRooms,
          myRoomsUsers: state.firestore.data.myRoomsUsers,
        })
      )
    )(view);

    This codebase is still pretty new to us so we're still trying to work out exactly how the redux was set up and how firestoreConnect is being used here. We've tried refactoring how the store is created and we have tried updating other dependencies but still can't get past this error. If anyone has any insights about firestoreConnect() and getState() it would be most appreciated!

    Alex McKay
    @alexandermckay
    firestoreConnect only has one parameter: props. Docs here.
    Erin Untermeyer
    @ErinUntermeyer
    @alexandermckay Do you know how we would access the store in the 2nd firestoreConnect then? We inherited this codebase and it was working the way the code is written above prior to upgrading the react-redux-firebase dependency. We now cannot seem to get firestoreConnect to properly access the redux store.
    Gabriel Poussif
    @Gsiete

    Yeah it is like an elasticsearch as a service. Great if you aren't worried too much about costs, but if you are you can always run your own elasticsearch instance

    Anybody with experience on how to combine this with react-redux-firebase?

    Gabriel Poussif
    @Gsiete
    @prescottprue How should I combine react-redux-firebase with Algolia?
    Renato Formato
    @rformato
    Hi everyone, is there a way to add subcollections to the profile?
    I have a firestore db and i can read the user profile in state.firebase.profile
    I understand I can connect to the subcollection with firestore, but it won't be reflected in the profile object, so I was just wondering if there's an easy way to do it, or, and this is likely, maybe it's not a good idea?
    nemet4ndrea
    @nemet4ndrea
    Guys, does link from firebase.auth.photoURL still work for you? I see an avatar placehoder photo and something that now a token needs to be used to fetch the Facebook user photo
    nemet4ndrea
    @nemet4ndrea
    also do you know a good example that uses fetchProvidersForEmail to link multiple auth providers? Thanks!
    Try Space
    @TrySpace
    Hi! Question
    How to maintain/reuse state when queriying same collection again
    Not sure how it is meant to be used, but is there an existing way to keep the state of collections intact without removing the previous state?
    Every time a component renders with useFirestoreConnect, it will clear the existing store, which I'm not even sure if that's expected behaviour.
    It might also be why this issue: prescottprue/react-redux-firebase#914 is causing such a render-blocking issue, because instead of replacing them in quick succession, it is adding them, causing too many re-renders, where replacing them should cause minimal or no change at all.
    Simon B.
    @sesam
    Hi, is there any documentation for how state.firestore.composite behaves if I call useFirestoreConnect from different components that end up under the same key (so same collection, different where) ?
    Daniel Rodríguez Rivero
    @danielo515
    Seems this chat is dead right?
    Sherwin Mascarenhas
    @sherwinfarrell
    Hi i'm trying to source firebase data in react using redux. For this I am using the firebaseConnect component to source the data in to the component. I'm also, using useEffect with the [props.variable], since i've mapped the firebase state to props, but any change on firebase, with regard to the data, isn't being reflected on the ui and I need to force refresh.