firebase - 如何组合两个 Redux Firebase Cloud Firestore 查询?
问题描述
我有两个从我的 Firebase Firestore 中提取帖子的 redux 查询。第一个成功显示我关注的人的所有帖子:
export function fetchUsersFollowingPosts(uid) {
return ((dispatch, getState) => {
firebase.firestore()
.collection("posts")
.doc(uid)
.collection("userPosts")
.orderBy("creation", "asc")
.get()
.then((snapshot) => {
const uid = snapshot.query.EP.path.segments[1];
const user = getState().usersState.users.find(el => el.uid === uid);
let posts = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data, user }
})
for (let i = 0; i < posts.length; i++) {
dispatch(fetchUsersFollowingLikes(uid, posts[i].id))
}
dispatch({ type: USERS_POSTS_STATE_CHANGE, posts, uid })
})
})
}
第二个显示了我自己的所有帖子。
export function fetchUserPosts() {
return ((dispatch) => {
firebase.firestore()
.collection("posts")
.doc(firebase.auth().currentUser.uid)
.collection("userPosts")
.orderBy("creation", "desc")
.get()
.then((snapshot) => {
let posts = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
dispatch({ type: USER_POSTS_STATE_CHANGE, posts })
})
})
}
这是我目前从我关注的人中列出用户的地方。但是如何将它们组合起来,以便在一个 FlatList 中显示我的帖子和我关注的人的帖子?
function Feed(props) {
useStatusBar('dark-content');
const [posts, setPosts] = useState([]);
const [refreshing, setRefreshing] = useState(false)
useEffect(() => {
if (props.usersFollowingLoaded == props.following.length && props.following.length !== 0) {
props.feed.sort(function (x, y) {
return y.creation.toDate() - x.creation.toDate();
})
setPosts(props.feed);
setRefreshing(false)
}
}, [props.usersFollowingLoaded, props.feed])
return (
<View style={styles.background}>
{posts.length > 0 ?
<View style={styles.containerGallery}>
<FlatList
refreshControl={
<RefreshControl
refreshing={refreshing}
tintColor="white"
onRefresh={() => {
setRefreshing(true);
props.reload()
}}
/>
}
showsVerticalScrollIndicator={false}
numColumns={1}
horizontal={false}
data={posts}
renderItem={({ item }) => (
<View style={styles.containerImage}>
<Card title={item.title} onPress={() => props.navigation.navigate(routes.GOOD_STUFF_DETAIL, { item: item, postId: item.id, uid: item.user.uid, user: item.user,})} showLike={true} author={"Recommended by " + item.user.name} likeItem={item} likeCount={item.likesCount} icon={categories.categories[item.categoryID].icon} timeStamp={timeDifference(new Date(), item.creation.toDate())}/>
</View>
)}
/>
</View>
: <NothingHere title="Follow friends" text="To see their Good Stuff here" icon="search" color="white"/> }
</View>
)
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
following: store.userState.following,
feed: store.usersState.feed,
usersFollowingLoaded: store.usersState.usersFollowingLoaded,
})
const mapDispatchProps = (dispatch) => bindActionCreators({ reload }, dispatch);
export default connect(mapStateToProps, mapDispatchProps)(Feed);
下面是我的数据结构:
谢谢阅读!
解决方案
根据您的数据,并且知道 Firestore 上的查询有多么有限,您需要在客户端上进行合并。
我要做的是将列表保留在 redux 上并在 reducer 上处理合并。您只需要监听这两个操作,然后将它们合并为您的应用程序中的一个数组。
如果您想避免用户看到部分数据(例如,您显示自己的帖子,然后再次刷新只是添加您的关注者帖子,因此 UI 会改变),您可能希望在加载数据并显示时保留两个标志(布尔值)如果两个列表都未加载,则为微调器。
除非你想重构你的代码,否则很多合并发生在客户端。
另外,侧节点,我不会像您在第一个循环中那样在 for 循环上分派某些东西,因为如果这触发了 firestore 请求,那么它可能会很快变得昂贵。
推荐阅读
- node.js - 为什么我的 Node.js MS SQL 脚本永远不会结束,除非我 CTRL+C 退出它?
- java - 使用 Java 获取网站上所有 URL 的列表
- arrays - perl how can I append STDOUT of list form system call of perl script to a file
- javascript - javascript如何填充数组值的返回值
- r - 从不同的变量中选择数据标签
- java - E/SQLiteLog: (1) unrecognized token: ":"
- ios - 在 iOS 13 上的 Swift 中使用 Apple for Firebase 设置登录时出错的原因是什么?
- javascript - Firebase startat timestamp issue?
- python-3.x - How to replace a charachter and change the Scre at the same time?
- scheme - Calling list function with Dr Racket R5RS undefined error for '( 1 2 3) for the list