在React-redux项目中使用firestoreConnect获取子集合-云Firebase的步骤如下:
npm install firebase react-redux-firebase
firebaseConfig.js
的文件,并添加以下内容:import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
projectId: 'YOUR_PROJECT_ID',
// 其他配置信息...
};
firebase.initializeApp(firebaseConfig);
export default firebase;
firestoreConnect
高阶函数来获取子集合数据。首先,确保你已经导入了所需的库和组件:import React from 'react';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
firestoreConnect
函数来获取子集合数据。你需要指定要获取的集合路径和子集合的名称。例如,假设你要获取名为users
的集合中的名为posts
的子集合数据,可以这样做:const YourComponent = ({ posts }) => {
// 在这里使用获取到的子集合数据
return (
<div>
{posts && posts.map(post => (
<div key={post.id}>{post.title}</div>
))}
</div>
);
};
const mapStateToProps = state => {
// 指定要获取的子集合路径
const collectionPath = 'users';
const subcollectionName = 'posts';
// 使用firestoreConnect来获取子集合数据
return {
posts: state.firestore.ordered[collectionPath]?.[0]?.[subcollectionName]
};
};
export default compose(
connect(mapStateToProps),
firestoreConnect(props => {
// 指定要获取的子集合路径
const collectionPath = 'users';
const subcollectionName = 'posts';
// 构建查询
return [
{
collection: collectionPath,
doc: props.userId,
subcollections: [{ collection: subcollectionName }],
storeAs: `${collectionPath}-${props.userId}-${subcollectionName}`
}
];
})
)(YourComponent);
在上述代码中,我们首先在mapStateToProps
函数中指定要获取的子集合路径,并使用state.firestore.ordered
来获取子集合数据。然后,在firestoreConnect
函数中构建查询,指定要获取的子集合路径和存储数据的名称。
注意:在上述代码中,我们使用了compose
函数来组合多个高阶函数。确保你已经导入了compose
函数。
以上就是在React-redux项目中使用firestoreConnect获取子集合的步骤。请根据你的实际需求和集合结构进行相应的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云