stateBasedQuery

State Based Query Example

This example shows using data from redux state to make a query based on props (also known as a dynamic query). A good example of this is querying based on the current user's UID.

Note: Example does not use routing, which is what will commonly be used when creating a full application. For how to build with routing, please view the routing recipes section of the docs.

What It Does

1. Top level component in Home.js uses connect function to bring auth from redux state into a prop name "auth":

   // Map redux state to props
   export default connect(state => ({
     auth: state.firebase.auth
   }))(Home)

2. That component then uses isLoaded and isEmpty to show different views based on auth state (logged in or not):

   function Home({ auth }) {
     // handle initial loading of auth
     if (!isLoaded(auth)) {
       return <div>Loading...</div>
     }
   
     // User is not logged in, show login view
     if (isEmpty(auth)) {
       return <LoginView />
     }
   
     // Pass uid to Todos (later used for a listener)
     return <Todos uid={auth.uid} />
   }

3. The component in Todos.js then uses uid (from props) as part of a query for todos:

   const enhance = compose(
     // Create Real Time Database Listeners on mount
     firebaseConnect(props => [
       // uid comes from props
       {
         path: 'todos',
         queryParams: ['orderByChild=uid', `equalTo=${props.uid}`]
       }
     ]),
     // Map redux state to props
     connect(state => ({
       todos: state.firebase.ordered.todos
     }))
   )