- 首页
- 其他开发
- 如何将 firestore 子集合加载到 redux 存储?
如何将 firestore 子集合加载到 redux 存储?
[英] How to load firestore subcollection to redux store?
本文介绍了如何将 firestore 子集合加载到 redux 存储?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 redux 商店中加载 firestore 子集合时遇到问题.我正在尝试在子组件中加载相应的子集合.
组件结构如下所示:
仪表板--项目清单- 项目总结--评论
我已经使用仪表板组件内的 firestoreConnect 加载名为 Projects 的集合，将数据传递到 项目列表 映射数据到项目总结.comments 是项目摘要
的子组件
我的 firestore 集合结构如下所示:
项目--project1--评论
仪表板:
class Dashboard extends Component {使成为() {const { 项目，身份验证，通知} = this.propsif (!auth.uid) return 返回(<div className="仪表盘容器"><div className="row"><div className="col s12 m8 offset-m2 l8"><ProjectList projects={projects}/>
<div className="col s12 offset-m1 hide-on-med-and-down l4"><通知通知={通知}/>
)}}const mapStateToProps = (状态) =>{//console.log("ref: ",state)返回 {项目:state.firestore.ordered.projects，缩写:state.firebase.profile.initials，身份验证:state.firebase.auth，通知:state.firestore.ordered.notifications}}导出默认撰写(连接(mapStateToProps)，firestoreConnect([{ collection: 'projects', orderBy: ['createdAt', 'desc'] },{ collection: 'notifications', limit: 3, orderBy: ['time', 'desc'] }]))(仪表盘)
项目列表组件:
const ProjectList = ({ projects }) =>{返回(<div className="项目列表部分">{项目&&项目.map((项目) => {返回(<div key={project.id}><ProjectSummary project={project}/>
)})}
)}导出默认项目列表
项目总结:
const ProjectSummary = ({ project }) =>{返回(<div className="card z-depth-0 project-summary show-up post"><div className="名称"><div className=""><span className="btn btn-floating z-depth-0 black user-indicator">{project.authorFirstName &&project.authorFirstName[0]}{project.authorSecondName &&project.authorSecondName[0]}</span><跨度>{project.authorFirstName {project.authorSecondName} </span><span className="正确的选项"><i className="material-icons">more_vert</i></span><div className="card-image"><img src={project.imageUrl} alt="art"/><PostCredits/>
<div className="card-reveal"><评论id={project.id}/>
<div className="卡片内容"><Link to={'/projectdetails/' + project.id} className="black-text"><p className="post-title">{project.title} </p></链接><p className="grey-text lighten-3 load-comments activator">加载评论
<p className="灰色文本日期格式">{project.createdAt &&project.createdAt.迄今为止().toLocaleDateString('印度', {年:数字"，月:短"，日:数字"})}</p><div className="add-comment"><AddComment projectId={project.id}/>
)}导出默认 ProjectSummary
评论:
const Comment = (props) =>{返回(<div><div className="loaded-comments"><span className="card-title grey-text text-darken-4">评论 <i className="material-icons right">close</i></span><p><span className="评论员">乔</span></p>)}const mapStateToProps = (state, ownProps) =>{console.log("状态:", 状态)返回 {}}导出默认撰写(连接(mapStateToProps)，firestoreConnect(道具=> {返回 [{集合:'项目'，文档:props.id，子集:[{集合:'评论'}]}]}))(评论)
预期结果:
*想要加载 Project 集合的名为 Comments
的子集合实际结果:
*没有发生错误但仍然没有加载数据.
提前致谢！
解决方案
您可能没有看到该子集合.如果您在浏览器控制台中查看，请导航到 firebase >ordered > prjoects > comments.你应该能够看到你的评论数组
示例:
|-firestore|--订购:|---项目:数组(1)|----0:|----id: *uid*|------评论:数组(2)|-------0: {*评论详情*}|-------1: {*评论详情*}|------长度:2|----__proto__:数组(0)
在您可以根据您的密钥映射您的数据之后.
const mapStateToProps = (state) =>{返回 {项目:state.firestore.ordered.projects.comments，}}
一旦连接，您就可以使用您的数据.
I'm having trouble loading firestore subcollection in redux store. I'm trying to load respective subcollection inside the child component.
The component structure looks like this:
Dashboard
--Project list
--project summary
--comments
I have loaded collection named Projects using firestoreConnect inside Dashboard component passing data to Project list mapping data to Project Summary. comments is a child component of project summary
My firestore collection structure looks like this:
Projects
--project1
--comments
Dashboard:
class Dashboard extends Component {
render() {
const { projects, auth, notifications } = this.props
if (!auth.uid) return <Redirect to='/signin' />
return(
<div className="dashboard container">
<div className="row">
<div className="col s12 m8 offset-m2 l8">
<ProjectList projects={projects} />
</div>
<div className="col s12 offset-m1 hide-on-med-and-down l4">
<Notification notifications={notifications} />
</div>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
// 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)
Project list Component:
const ProjectList = ({ projects }) => {
return(
<div className="project-list section">
{projects && projects.map((project) => {
return(
<div key={project.id}>
<ProjectSummary project={project}/>
</div>
)
})}
</div>
)
}
export default ProjectList
Project summry:
const ProjectSummary = ({ project }) => {
return(
<div className="card z-depth-0 project-summary show-up post">
<div className="name">
<div className="">
<span className="btn btn-floating z-depth-0 black user-indicator">
{project.authorFirstName && project.authorFirstName[0]}{project.authorSecondName && project.authorSecondName[0]}
</span>
<span> {project.authorFirstName {project.authorSecondName} </span>
<span className="right options"> <i className="material-icons">more_vert</i> </span>
</div>
</div>
<div className="card-image">
<img src={project.imageUrl} alt="art" />
<PostCredits />
</div>
<div className="card-reveal">
<Comments id={project.id} />
</div>
<div className="card-content">
<Link to={'/projectdetails/' + project.id} className="black-text">
<p className="post-title"> {project.title} </p>
</Link>
<p className="grey-text lighten-3 load-comments activator"> Load comments </p>
<p className="grey-text date-format">
{project.createdAt && project.createdAt
.toDate()
.toLocaleDateString('indian', {
year: "numeric", month: "short", day: "numeric"
})}
</p>
</div>
<div className="add-comment">
<AddComment projectId={project.id} />
</div>
</div>
)
}
export default ProjectSummary
Comment:
const Comment = (props) => {
return(
<div>
<div className="loaded-comments">
<span className="card-title grey-text text-darken-4"> Comments <i className="material-icons right">close</i> </span>
<p> <span className="commentor"> Joe </span> </p>
</div>
</div>
)
}
const mapStateToProps = (state, ownProps) => {
console.log("state: ", state)
return {
}
}
export default compose (
connect(mapStateToProps),
firestoreConnect(props => {
return [
{ collection: 'projects',
doc: props.id,
subcollections: [
{
collection: 'comments'
}
]
}
]
})
)(Comment)
Expected Result:
*Want to load Project collection's subcollection named Comments
Actual Result:
*No error occurs but still no data is loaded.
Thanks in advance!
解决方案
There is a possibility that you just don't see that sub-collection.
If you look under in your browser console, navigate to firebase > ordered > prjoects > comments. you should be able to see an array of your comment
Example:
|-firestore
|--ordered:
|---projects: Array(1)
|----0:
|-----id: *uid*
|------comments: Array(2)
|-------0: {*comment details*}
|-------1: {*comment details*}
|------length: 2
|-----__proto__: Array(0)
After you can map your data based on your key.
const mapStateToProps = (state) => {
return {
projects: state.firestore.ordered.projects.comments,
}
}
Once connected you will be able to use your data.
这篇关于如何将 firestore 子集合加载到 redux 存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
