by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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?
    Ryan Poh
    @ryanpoh
    @illuminist Yes, would love some help. Can't seem to figure what's wrong. I followed the docs
    illuminist
    @illuminist
    If I should have guess, you need this.props.barChart
    Ryan Poh
    @ryanpoh
    
    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
    illuminist
    @illuminist
    Well, yes. In render() you should access with this.props.barChart
    Ryan Poh
    @ryanpoh
    @illuminist I tried it. It wasn't the problem.
    because i have already destructure on top
    illuminist
    @illuminist
    I see. Next up, you need to take an account that this.props.barChart might be undefined when it start loading and data isn't available in redux yet
    Ryan Poh
    @ryanpoh
    sorry, i forgot to include that. just edited the code above
    illuminist
    @illuminist
    It will change from undefined to be an actual data after a few render so you also need to make your component handle undefined data too
    Ryan Poh
    @ryanpoh
    will something like barChart: state.firestore.ordered.barChartDb || state.barChart.data work?
    state.barChart.data contains my dummy data I have for testing
    The errors goes away and my page loads now. But still not the data from firestore :(
    illuminist
    @illuminist
    Depends on if your dummy data has exactly same data shape as firestore. If not you may need to handle them differently.
    Ryan Poh
    @ryanpoh
    Yep it has the same shape. Like this[ {}, {}, {} ]
    Which is similar to state.firestore.ordered.fooright?
    illuminist
    @illuminist
    Not quite, state.firestore.ordered will have document id attach to each object also
    And Date object is going to be converted to Firestore.Timestamp
    Are you using redux-devtools?
    It will be easier to inspect with redux-devtools to see if data is loaded
    Ryan Poh
    @ryanpoh
    I see. But in my case I am just extracting strings and numbers.
    {
    month: "June",
    delay: 70
    }
    something like this^
    illuminist
    @illuminist
    It's ok then.
    Could you confirm the data from firestore doesn't arrive in redux?
    Ryan Poh
    @ryanpoh
    Hmm weird. I can't seem to get my dev tool to work
    Screenshot 2020-02-14 at 7.40.12 PM.png
    Screenshot 2020-02-14 at 8.13.30 PM.png
    illuminist
    @illuminist
    Have you configured devtool when creating the store?
    Ryan Poh
    @ryanpoh
    Console: DevTools failed to parse SourceMap
    illuminist
    @illuminist
    I don't think that's related redux-devtools, but from your code, you haven't configure redux store for inspection with redux-devtools
    Elijah Lucian
    @elucian1_gitlab
    hey all: how do i get typescript defs for redux-firestore/src/utils/query ?
    i get: Could not find a declaration file for module 'redux-firestore/src/utils/query'.
    rlagkrdy
    @rlagkrdy

    Hi. I have some problem about firestore.rules.
    In other collection can access resource.data,
    But only one collection can’t access, resource.data return undefined.

    When I test it, before already set mock data.

    I miss something?

    스크란샷 2020-03-06 α„‹α…©α„Œα…₯ᆫ 10.30.24.png
    스크란샷 2020-03-06 α„‹α…©α„Œα…₯ᆫ 10.30.56.png
    rlagkrdy
    @rlagkrdy
    Oh, I found problem in here