title: How to load firestore subcollection to redux store?
body: <p>I'm having trouble loading firestore subcollection in redux store. I'm trying to load respective subcollection inside the child component.</p>
  
  <h2>The component structure looks like this:</h2>
  
  <p>Dashboard
  --Project list
  --project summary
  --comments</p>
  
  <p>I have loaded collection named <strong><em>Projects</em></strong> using firestoreConnect inside Dashboard component passing data to <strong><em>Project list</em></strong> mapping data to <strong><em>Project Summary</em></strong>. <strong><em>comments</em></strong> is a child component of <strong><em>project summary</em></strong></p>
  
  <h2>My firestore collection structure looks like this:</h2>
  
  <p>Projects
  --project1
  --comments</p>
  
  <h3>Dashboard:</h3>
  
  <pre><code>class Dashboard extends Component {
    render() {
      const { projects, auth, notifications } = this.props
      if (!auth.uid) return &lt;Redirect to='/signin' /&gt;
      return(
        &lt;div className="dashboard container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col s12 m8 offset-m2 l8"&gt;
              &lt;ProjectList projects={projects} /&gt;
            &lt;/div&gt;
            &lt;div className="col s12 offset-m1 hide-on-med-and-down l4"&gt;
              &lt;Notification notifications={notifications} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    // console.log("ref: ",state)
    return {
      projects: state.firestore.ordered.projects,
      initials: state.firebase.profile.initials,
      auth: state.firebase.auth,
      notifications: state.firestore.ordered.notifications
    }
  }
  
  export default compose (
    connect(mapStateToProps),
    firestoreConnect([
      { collection: 'projects', orderBy: ['createdAt', 'desc'] },
      { collection: 'notifications', limit: 3, orderBy: ['time', 'desc'] }
    ])
  )(Dashboard)
  </code></pre>
  
  <h2>Project list Component:</h2>
  
  <pre><code>const ProjectList = ({ projects }) =&gt; {
    return(
      &lt;div className="project-list section"&gt;
        {projects &amp;&amp; projects.map((project) =&gt; {
          return(
            &lt;div key={project.id}&gt;
                &lt;ProjectSummary project={project}/&gt;
            &lt;/div&gt;
          )
        })}
      &lt;/div&gt;
    )
  }
  
  export default ProjectList
  </code></pre>
  
  <h2>Project summry:</h2>
  
  <pre><code>const ProjectSummary = ({ project }) =&gt; {
      return(
        &lt;div className="card z-depth-0 project-summary show-up post"&gt;
  
          &lt;div className="name"&gt;
            &lt;div className=""&gt;
              &lt;span className="btn btn-floating z-depth-0 black user-indicator"&gt;
                {project.authorFirstName &amp;&amp; project.authorFirstName[0]}{project.authorSecondName &amp;&amp; project.authorSecondName[0]}
              &lt;/span&gt;
               &lt;span&gt; {project.authorFirstName {project.authorSecondName} &lt;/span&gt;
               &lt;span className="right options"&gt; &lt;i className="material-icons"&gt;more_vert&lt;/i&gt; &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className="card-image"&gt;
            &lt;img src={project.imageUrl} alt="art" /&gt;
            &lt;PostCredits /&gt;
          &lt;/div&gt;
  
          &lt;div className="card-reveal"&gt;
            &lt;Comments id={project.id} /&gt;
          &lt;/div&gt;
  
          &lt;div className="card-content"&gt;
            &lt;Link to={'/projectdetails/' + project.id} className="black-text"&gt;
              &lt;p className="post-title"&gt; {project.title} &lt;/p&gt;
            &lt;/Link&gt;
            &lt;p className="grey-text lighten-3 load-comments activator"&gt; Load comments &lt;/p&gt;
            &lt;p className="grey-text date-format"&gt;
              {project.createdAt &amp;&amp; project.createdAt
                .toDate()
                .toLocaleDateString('indian', {
                  year: "numeric", month: "short", day: "numeric"
              })}
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="add-comment"&gt;
            &lt;AddComment projectId={project.id} /&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      )
  }
  
  export default ProjectSummary
  </code></pre>
  
  <h2>Comment:</h2>
  
  <pre><code>const Comment = (props) =&gt; {
      return(
        &lt;div&gt;
          &lt;div className="loaded-comments"&gt;
            &lt;span className="card-title grey-text text-darken-4"&gt; Comments &lt;i className="material-icons right"&gt;close&lt;/i&gt; &lt;/span&gt;
            &lt;p&gt; &lt;span className="commentor"&gt; Joe &lt;/span&gt;  &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    console.log("state: ", state)
    return {
  
    }
  }
  
  export default compose (
    connect(mapStateToProps),
    firestoreConnect(props =&gt; {
      return [
        { collection: 'projects',
          doc: props.id,
          subcollections: [
            {
              collection: 'comments'
            }
          ]
        }
      ]
    })
  )(Comment)
  </code></pre>
  
  <h3>Expected Result:</h3>
  
  <p>*Want to load <em>Project</em> collection's subcollection named <em>Comments</em></p>
  
  <h3>Actual Result:</h3>
  
  <p>*No error occurs but still no data is loaded.</p>
  
  <p>Thanks in advance!</p>