Javascript 如何在React redux项目-Cloud Firebase中使用firestoreConnect获取子集合

我正在学习使用下面的教程对redux firebase作出反应

我将子集合添加到集合中。 但是，我不知道如何获取子集合。 我需要得到原始集合及其子集合

教程：

我想用这个

不是 编辑的答案：

我没有在这里发布所有的步骤，但是您需要遵循与projects集合完全相同的步骤，但是对于subprojects集合，请制作subprojects reducer，将其添加到

rootReducer

…等，以便子项目处于全局状态，并且您可以将它们链接到组件，与您在“项目”集合中所做的相同

您需要在项目缩减器本身中定义它是否在一个单独的缩减器中，以便它将以如下状态出现：

const subprojects=state.firestore.data.projects.subprojects

要组成连接器，您需要检查建议如何连接子集合的位置。检查exmaple：

{
  collection: 'cities',
  doc: 'SF',
  subcollections: [{ collection: 'zipcodes' }],
  storeAs: 'SF-zipcodes' // make sure to include this
},

也就是说，
MapStateTrops
如下所示：

const mapStateToProps = (state, ownProps) => {
  // console.log(state);
  const id = ownProps.match.params.id;
  const subprojects = state.firestore.data.projects.subprojects;
  const subproject = subproject ? subproject [id] : null
  return {
    subproject : subproject 
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect([{
    collection: 'projects',
    doc: 'YourDoc'
    subcollections: [{ collection: 'subprojects' }],
    storeAs: 'YorDoc-subprojects'
  }])
)(YourSubProjectsComponent)

不是调试过的代码，只是一个基于回购示例的建议，以防它可能会对您有所帮助

另一方面，如果有任何帮助，请在
projectDetails
compent的代码下面查找，使用
useState
hook从firestore获取确定的项目。对于您的具体情况，我相信它将采用相同的方式，但查询您的
子项目
集合。（打字脚本代码）。我发布了这篇文章，以防您可能需要“手动”获取您的收藏，而不是直接使用redux绑定。如果您想要的是直接绑定子项目集合的redux，那么只需使用下面的代码即可

import { IFirebaseProject } from '../../store/types/projectTypes';
import { Redirect } from 'react-router-dom';
import moment from 'moment';
import firebase from 'firebase/app';
import { useState } from 'react'; 

async function getFbProject(id: string) {
  const db = firebase.firestore();
  const fbDoc = db.collection("projects").doc(id);
  let project = {} as IFirebaseProject;
  await fbDoc.get().then(function(doc) {
      if (doc.exists) {
          console.log("Document data:", doc.data());
          project = { ...doc.data()} as IFirebaseProject;
      } else {
          console.log(`Document does not exist ${id}`);
      }
  }).catch(function(error) {
      console.log(`Error getting document: ${id}`, error);
  });

  return project;
}

function getProjectId():string {
  const pathStr = window.location.pathname.toString();
  const parts = pathStr.split("/");
  const projStrIndex = parts.indexOf('project');
  const projectId = parts[projStrIndex + 1];
  return projectId;
}

const ProjectDetails = ({ project }: { project: IFirebaseProject } | { project: undefined }) => {
  const [stateProject, setStateProject] = useState<IFirebaseProject | undefined>(project);
  if (!firebase.auth().currentUser) return <Redirect to='/'/>
  if (stateProject) {
    return(
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">{stateProject.title}</span>
            <p>
              {stateProject.content}
            </p>
          </div>
          <div className="card-action grey lighten-4">
            <div>{stateProject.authorFirstName} {stateProject.authorLastName}</div>
            <div>{moment(stateProject.createdAt.toDate()).calendar()}</div>
          </div>
        </div>
      </div>
    )
  } else {
    //fetch project
    const projectId = getProjectId();
    getFbProject(projectId).then((project) => { 
      if (project) {
        setStateProject(project);
      }
    });

    return(
      <div>
        <p> Loading project... </p>
      </div>
    )
  }
}

export default ProjectDetails;

从“../../store/types/projectTypes”导入{IFirebaseProject}；
从'react router dom'导入{Redirect}；
从“力矩”中导入力矩；
从“firebase/app”导入firebase；
从“react”导入{useState}；
异步函数getFbProject（id:string）{
const db=firebase.firestore（）；
const fbDoc=db.collection（“项目”）.doc（id）；
让project={}作为IFirebaseProject；
等待fbDoc.get（）。然后（函数（doc）{
如果（文件存在）{
log（“文档数据：”，doc.data（））；
project={…doc.data（）}作为IFirebaseProject；
}否则{
log（`Document不存在${id}`）；
}
}).catch（函数（错误）{
log（`Error get document:${id}`，Error）；
});
返回项目；
}
函数getProjectId（）：字符串{
const pathStr=window.location.pathname.toString（）；
const parts=pathStr.split（“/”）；
const projStrIndex=parts.indexOf（'project'）；
常量projectId=部分[projStrIndex+1]；
返回投影；
}
const ProjectDetails=（{project}:{project:IFirebaseProject}{project:undefined}）=>{
const[stateProject，setStateProject]=useState（项目）；
如果（！firebase.auth（）.currentUser）返回
if（州项目）{
返回(
{stateProject.title}

{stateProject.content}

{stateProject.authorFirstName}{stateProject.authorLastName}
{时刻（stateProject.createdAt.toDate（））.calendar（）}
)
}否则{
//获取项目
常量projectId=getProjectId（）；
getFbProject（projectId）.then（（project）=>{
国际单项体育联合会（项目）{
项目（项目）；
}
});
返回(
正在加载项目

)
}
}
导出默认项目详细信息；

import { IFirebaseProject } from '../../store/types/projectTypes';
import { Redirect } from 'react-router-dom';
import moment from 'moment';
import firebase from 'firebase/app';
import { useState } from 'react'; 

async function getFbProject(id: string) {
  const db = firebase.firestore();
  const fbDoc = db.collection("projects").doc(id);
  let project = {} as IFirebaseProject;
  await fbDoc.get().then(function(doc) {
      if (doc.exists) {
          console.log("Document data:", doc.data());
          project = { ...doc.data()} as IFirebaseProject;
      } else {
          console.log(`Document does not exist ${id}`);
      }
  }).catch(function(error) {
      console.log(`Error getting document: ${id}`, error);
  });

  return project;
}

function getProjectId():string {
  const pathStr = window.location.pathname.toString();
  const parts = pathStr.split("/");
  const projStrIndex = parts.indexOf('project');
  const projectId = parts[projStrIndex + 1];
  return projectId;
}

const ProjectDetails = ({ project }: { project: IFirebaseProject } | { project: undefined }) => {
  const [stateProject, setStateProject] = useState<IFirebaseProject | undefined>(project);
  if (!firebase.auth().currentUser) return <Redirect to='/'/>
  if (stateProject) {
    return(
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">{stateProject.title}</span>
            <p>
              {stateProject.content}
            </p>
          </div>
          <div className="card-action grey lighten-4">
            <div>{stateProject.authorFirstName} {stateProject.authorLastName}</div>
            <div>{moment(stateProject.createdAt.toDate()).calendar()}</div>
          </div>
        </div>
      </div>
    )
  } else {
    //fetch project
    const projectId = getProjectId();
    getFbProject(projectId).then((project) => { 
      if (project) {
        setStateProject(project);
      }
    });

    return(
      <div>
        <p> Loading project... </p>
      </div>
    )
  }
}

export default ProjectDetails;